Ich kenne bereits die Lösung meines Problems, aber ich frage mich, warum das passiert. Warum Hintergrund Hintergrundgröße überschreibt? Bitte schreibe nicht über Crossbrowsing.
HTML
%Vor%CSS
%Vor%DEMO
LÖSUNG
Fügen Sie die Anweisung background-size unter background
background setzt die Bildposition zurück, nachdem Sie die Größe festgelegt haben.
Der Grund dafür ist, dass die Eigenschaft 'background' eine Kurzschreibeigenschaft ist, um die meisten Hintergrundeigenschaften an derselben Stelle im Stylesheet festzulegen.
Auch background-size , das ist das, was Sie zuvor versucht haben.
Sie verwenden
%Vor%Was bedeutet:
%Vor% Sie können also versuchen, die Einstellungen für background-...
Also entweder:
%Vor%Oder tauschen Sie einfach Ihre Linien.
background ist eine CSS "shorthand property", um mehrere zugehörige Hintergrundeigenschaften zu einer Deklaration zu kombinieren ( background-color , background-image , background-repeat , background-position usw.).
Somit überschreibt es alle Eigenschaften, die nicht direkt in der Kurzschrift angegeben sind, mit ihrem Standardwert (soweit ich weiß ... gemäß dem W3C-Spezifikation Sie können background-size in der Eigenschaft background shorthand nach background-position angeben, aber ich habe das nicht getestet und ich habe keine Ahnung, welche Browser-Unterstützung dafür momentan verfügbar ist aber ich vermute, dass es nicht großartig ist). Wie ich es verstehe, ist dies, weil das background shorthand implizit alle Eigenschaften, die es darstellt, nicht nur die angegebenen, sondern alle, die nicht in der Abkürzung Deklaration definiert sind auf ihren Standardwert gesetzt.
Um es zu beheben, entweder:
1) Setzen Sie die Eigenschaft background-size NACH der Eigenschaft background
2) Setzen Sie die Deklaration background-size in einen spezifischeren Selektor, d. h. a.icon anstatt .icon
3) Verwenden Sie nicht background shorthand, sondern verwenden Sie stattdessen die einzelnen Eigenschaften, um