Background-Filter plötzlich nicht wirksam

[Rolf B]

Hallo Killua,

Priorität und Spezifität sind nicht das gleiche. Die Herkunft des Stylesheets, die Reihenfolge des Antreffens und die Spezifität ergeben die Priorität. Der Gesamtkomplex heißt Kaskade - die Spezifität ist also nur ein Teilaspekt der Priorität.

background ist eine Shorthand-Eigenschaft, die 10 andere Werte vereint. Wenn Du weniger hinschreibst, muss der Browser zum einen herausknobeln, welchen Du wohl gemeint haben könntest, und zum anderen setzt er die Werte, für die Du nichts angibst, auf ihre Initialwerte.

Das Schlüsselwort none ist nur für background-image definiert, deshalb setzt background:none das background-image auf none und die übrigen 9 Teileigenschaften auf initial.

Die Interaktion mit anderen background-beeinflussenden Eigenschaften ist nun nicht so ganz trivial. Die Priorisierung erfolgt auf Ebene der Einzeleigenschaften, d.h. wenn Du dies hier hast:

#a {
   background: red;
}
.b {
   background-image: url(...);
}
...
<div id="a" class="b">...</div>

dann setzt die Regel für #a die background-color auf rot und den Rest auf initial, darunter auch background-image. #a ist ein ID-Selektor und damit eine Spezifitätsstufe höher als der Klassenselektor .b, deswegen wird background-image überschrieben, obwohl es im Stylesheet hinter der #a Regel steht.

Rolf