Jak mogę przesłonić tylko drugi obraz w wielu deklaracjach obrazu tła?

Question

W jaki sposób mogę wykorzystać kaskadę do zastąpienia tylko drugiego obrazu z wielu deklaracji obrazu tła?

Podałem standardowy styl dla li s, z dwoma obrazkami tła (kotka i ryba po prawej stronie). Ja również określony styl dla li.secondary gdzie chcę zmienić tylko drugi z dwoma obrazami tła:

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/

ale nowa deklarację dla background: wydmuchuje obrazu pierwszy tła (ryba). Jak mogę adresować tylko drugi obraz tła w regule kaskadowej?

Answer 1

Niestety, prace kaskadowe droga uniemożliwia zastąpienie poszczególnych warstw tła bez powtarzania pozostałych warstw w każdej deklaracji.

Generalnie cascade działa na zasadzie per-deklaracji, gdzie każdy declaration składa się z dokładnie jedną właściwość i jedna wartość:

/* Declaration */ 
property: value; 

oddzielonych przecinkami lista warstw tła liczy się jako pojedyncza wartość dla dla celów kaskady, dlatego twoja druga deklaracja background całkowicie przesłania pierwszą.

Chociaż background jest skrótem dla kilku innych właściwości, nie jest skrótem dla poszczególnych warstw tła, ponieważ nie mają one własnych właściwości. Ponieważ nie istnieją właściwości poszczególnych warstw, nie można używać kaskady do przesłonięcia tylko niektórych warstw, zachowując resztę.

Jest to również powód, dla którego przedrostki gradientów w warstwowym tle są tak pełne i powtarzalne. Niestety dla nas jest to ograniczenie składni CSS, więc niewiele można zrobić, aby poprawić lub obejść go za pomocą samego CSS.

---

_{Przypomina to dlaczego skróconą deklarację jak background: #ccc usunie obraz, który był uprzednio zadeklarowanej przy użyciu background-image (przykłady 1 i 2).}

_{Godnym uwagi wyjątkiem jest background-color, ponieważ na danym polu jest tylko jeden kolor tła, który jest zawsze pomalowane w najniżej pod warstwą obrazu w tej warstwie. Możesz ustawić background-color na pojedynczą wartość w dowolnym momencie w regule i nie wpłynie to na inne warstwy.}

Answer 2

Oczywiście nie ma czegoś takiego, wielokrotne tła są ustawiane za pomocą background-image właściwość, która nie ma żadnego potomków jak background-image-1 itp

Jednakże, można zastąpić go za pomocą jakiegoś Javascript

Answer 3

Rozwiązałem go z: przed pseudoelementem.

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; 
}