Wie kann ich nur das zweite Bild in einer mehrfachen Hintergrundbilddeklaration überschreiben?

Question

Wie kann ich die Kaskade verwenden, um nur das zweite Bild in einer mehrfachen Hintergrundbilddeklaration zu überschreiben?

Ich habe einen Standardstil für li s angegeben, mit zwei Hintergrundbildern (das Kätzchen und der Fisch auf der rechten Seite). Ich habe auch einen Stil für li.secondary angegeben, wo ich nur die zweite der beiden Hintergrundbilder ändern wollen:

li { 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAeCAYAAAA/xX6fAAAA/ElEQVR42q2WYQ3DIBSE5wAJk1AJSKiESpiESakEJCChEpAwCW/vJSw0LPQoHMn3A0q5R7leeIjIFNo2JSm+Zz5DSAy6oLan8lKiIjV5fGu8u+TnrkfIKftpUQGks3Au8qNE6yOx1Sb/xPJYyH3EURW4QsHGZ5NB3K0dDpDwDvEZysAZvvP4znVpwTVcmrAgLsLX/yXhP+xfrOyuza00sbFZ7p5TAGlyYMF/J4axNClOvKKVJnEmTa6gpgkSM0Ca8HdITxOiSwuzLjVoAUAUxIWQBXESMQTpSWQd4r0GuxiJsZPII0F6EnUZg5hES7dZWEkExPj3GiDCv9d8AVEGli2R88rKAAAAAElFTkSuQmCC) repeat-y 90% center, 
    #CCC url("http://placekitten.com/275/300") repeat right center; 
    margin: 1em; 
    padding: 1em; 
    color: #FFF; 
    font-weight: bold; 
} 

li.secondary { 
    background: #CCC url("http://placekitten.com/325/300") repeat left 10%; 
} 

JSFiddle: http://jsfiddle.net/KatieK/9zcnp/1/

Aber die neue Erklärung für background: bläst dem ersten Hintergrundbild (der Fisch). Wie kann ich in einer Cascading-Regel nur das zweite Hintergrundbild ansprechen?

Answer 1

Leider verwenden, die Art und Weise, die Kaskaden Werke macht es unmöglich, einzelne Hintergrund-Layer zu überschreiben, ohne den Rest der Layer in jeder Deklaration zu wiederholen.

Im Allgemeinen sind die cascade Arbeiten auf einer Pro-Erklärung Basis, wobei jeder declaration von genau einer Eigenschaft und einem Wert besteht:

/* Declaration */ 
property: value; 

Eine durch Kommata getrennte Liste von Hintergrundebenen zählt als ein einzelner Wert für die Zwecke der Kaskade, weshalb Ihre zweite background Deklaration vollständig überschreibt die erste.

Während background eine Abkürzung für mehrere andere Eigenschaften ist, ist es keine Abkürzung für einzelne Hintergrundschichten, da sie keine eigenen Eigenschaften haben. Da einzelne Layer-Eigenschaften nicht vorhanden sind, können Sie die Kaskade nicht dazu verwenden, nur bestimmte Layer zu überschreiben, während Sie den Rest behalten.

Dies ist auch der Grund, warum vorangestellte Farbverläufe in geschichteten Hintergründen so ausführlich und wiederholend sind. Leider ist dies für uns eine Einschränkung der CSS-Syntax, daher kann nicht viel getan werden, um CSS zu verbessern oder zu umgehen.

---

_{Dies ist ähnlich, warum die eine Kurzerklärung wie background: #ccc wird ein Bild löschen zuvor erklärt wurde background-image mit (Beispiele 1 und 2).}

_{Eine bemerkenswerte Ausnahme ist background-color, weil für jedes gegebenes Feld nur eine Hintergrundfarbe ist, die immer in der untersten Schicht unter dem Bild in dieser Schicht gemalt. Sie können background-color an einer beliebigen Stelle in einer Regel auf einen einzelnen Wert setzen, und dies wirkt sich nicht auf andere Layer aus.}

Answer 2

Offensichtlich ist es nicht so etwas, sind mehrere Hintergründe gesetzt background-image Eigenschaft verwenden, die keine Nachkommen hat wie background-image-1 usw.

Allerdings können Sie es außer Kraft setzen einige Javascript

Answer 3

Ich löste es mit einem: vor Pseudo-Element.

http://codepen.io/lajlev/pen/DAyhn

.tile { 
    position:relative; 
    display: block; 
    float: left; 
    width: 100px; 
    height: 100px; 
    margin: 30px; 
    background: url('http://www.schaik.com/pngsuite/tbbn3p08.png') no-repeat; 

    &:before { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: red; 
    z-index: -1; 
    } 
} 

.tile.last:before { 
    background-color: green; 
}