Warum funktioniert die Hintergrundgröße nicht?

Question

Ich habe Probleme background-size: cover; immer von meiner CSS-Datei zu arbeiten, wenn ein Inline-Hintergrundbild über style="" Tag festgelegt wird:

CSS

header.hero { 
    position: relative; 
    clear: both; 
    overflow: hidden; 
    min-height: 390px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    background: #cccccc; 
} 

HTML

<header class="hero" style="background-image: url('hero.jpeg');"></header> 

Wenn ich !important-background-size: cover; hinzufügen , es funktioniert richtig. Warum kann ich das nicht ohne !important arbeiten?

Answer 1

Versuchen Sie, background: #cccccc; zu background-color: #cccccc; zu ändern.

Da background eine Kurzschreibregel ist, überschreibt sie einige der zuvor festgelegten Werte.

Anfangswert, wie jede der Eigenschaften der Kurzschreibweise:

background-image: none 
background-position: 0% 0% 
background-size: auto auto 
background-repeat: repeat 
background-origin: padding-box 
background-clip: border-box 
background-attachment: scroll 
background-color: transparent 

Answer 2

Du overwritting all Hintergrundart mit background: #cccccc;, weil Sie nicht dem Hintergrund Attribut specifiyng, so dass Sie es von

ändern sollten

background-color: #cccccc;

auf diese Weise die Hintergrundfarbe als Farbattribut arbeiten und nicht die anderen überschreiben Attribute