Können Hintergrundeinstellungen nicht vom Hintergrundbild getrennt werden?

Question

Um die Größe meiner CSS-Datei zu reduzieren, wollte ich einige Befehle wie background-size faktorisieren. Lassen Sie uns sagen, dass ich viel Abschnitte wie dieses:

#interlude { 
    background: url(https://.../unsplash.jpg) no-repeat center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Im Einsatz:

<div id="interlude"></div> 

Wenn ich viele verschiedene „Zwischenspiel“ divs haben, werden alle größenbezogene Linien in CSS dupliziert. Ich möchte so etwas bekommen:

#interlude { 
    background: url(https://.../unsplash.jpg) no-repeat center fixed; 
} 
.bw-back-cover { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

In diesem Fall wird bw-back-cover Klasse nur einmal erklärt. Aber es funktioniert nicht und ich weiß nicht, ob das normal ist oder nicht.

Beiden Fälle auf Codepen

Answer 1

Im Fall Ihrer CodePen, die Stenografie background Eigenschaft überschreiben alle Hintergrund bezogenen Eigenschaften, nicht nur diejenigen, angegeben - so background-size ignoriert wird, weil background eine höhere Priorität hat (auf einer ID vs. einer Klasse).

Es gibt zwei Möglichkeiten, dies zu beheben.

1) Der einfache Weg ist !important zu jeder Zeile der background-size Eigenschaft hinzuzufügen, so dass sie nicht durch die background Stenografie überschrieben werden. (Allerdings würde ich die zweite Lösung unter vorschlagen, wie !important schwierig ist, außer Kraft zu setzen, wenn nötig.) Code:

.bw-back-cover { 
    -webkit-background-size: cover !important; 
    -moz-background-size: cover !important; 
    -o-background-size: cover !important; 
    background-size: cover !important; 
} 

2) Der Reiniger fix wäre Eigenschaften Ihres Hintergrunds zu spalten, anstatt die Kurz der Verwendung, so background-size wird nicht überschrieben. Code:

#interlude { 
    background-image: url(https://.../unsplash.jpg); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-attachment: fixed; 
}