Hintergrund No-Repeat setzt die Background-Clip-Eigenschaft auf padding-box?

Question

Wir haben eine einfache Liste mit drei Listenelementen. JSFiddle.

Erste li Hintergrund-Eigenschaft auf:

background: url(http://url-here.png) no-repeat 0 50%/15px 15px; 

no-repeat gesetzt ist, aber background-clip weggelassen.

Zweite li hat Hintergrund, wo sowohl no-repeat und border-Box-Set:

background: url(http://url-here.png) no-repeat 0 50%/15px 15px border-box; 

und dritter li ähnlich wie erst li, aber background-clip manuell einstellen:

background: url(http://url-here.png) no-repeat 0 50%/15px 15px; 
background-clip: border-box; 

Keeping in Beachten Sie, dass der Standardwert für background-clip "border-box" ist. Ich nehme an, dass das Setzen des Wertes für die zweite und dritte li redundant ist, aber nur die zweite li zeigt das Hintergrundbild so an, wie es sollte.

in Opera v getestet. 37.0.2178.54 und Google Chrome v. 50.0.2661.102 m

Bitte helfen Sie mir den Weg, um herauszufinden, es funktioniert. Vielen Dank!

Answer 1

Nein die background-repeat hat keinen Einfluss auf die background-clip Eigenschaft in irgendeiner Weise. Der Unterschied, den Sie in der zweiten li sehen, hat einen anderen Grund. Wenn wir in der Short-Hand-Eigenschaft nur einen Wert von box angeben, erhalten sowohl background-clip als auch background-origin den gleichen Wert.

Vom W3C Spec:

Wenn ein Wert vorhanden ist, dann setzt er sowohl ‚Hintergrund-Ursprung‘ und ‚Hintergrund-Clip‘ auf diesen Wert.

Also, Ihre zweite li bekommt background-origin: border-box während für die anderen beiden mit dem default value which is padding-box gesetzt wird.

background-origin ist die Eigenschaft, die angibt, von wo die background starten soll. Da der erste und der dritte li die background-origin als padding-box festgelegt haben, wird ihr Hintergrund innerhalb des Füllboxbereichs (innerhalb der Grenze) festgelegt.

Wenn dasselbe background-origin für alle drei li eingestellt ist, werden sie unabhängig von der Einstellung background-repeat auf die gleiche Weise angezeigt.

ul { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    border: 10px solid rgba(0, 0, 0, 0.60); 
 
    padding-left: 20px; 
 
    margin-bottom: 10px; 
 
} 
 
.no-repeat { 
 
    background: url(http://postcrossing-ua.com/static/pybb/smiles/D83DDE03.png) no-repeat 0 50%/15px 15px; 
 
    background-origin: border-box; 
 
} 
 
.no-repeat-border-box { 
 
    background: url(http://postcrossing-ua.com/static/pybb/smiles/D83DDE03.png) no-repeat 0 50%/15px 15px border-box; 
 
} 
 
.border-box { 
 
    background-clip: border-box; 
 
    background-origin: border-box; 
 
}

<ul> 
 
    <li class="no-repeat">White</li> 
 
    <li class="no-repeat-border-box">Black</li> 
 
    <li class="no-repeat border-box">Red</li> 
 
</ul>