Jak przypisać do jednego elementu kilka obrazków tła dzięki CSS 3?

CSS 3 posiada bardzo przydatną funkcje, która pozwala zakodować kilka różnych grafik z tłami do jednego elementu. Podobny efekt uzyskać można, zagnieżdżając DIV-y i przypisując im po jednym tle - prezentowany przez nas sposób jest jednak o wiele bardziej wydajny.

Składnia jest bardzo prosta, poszczególne tła rozdziela się jedynie przecinkami, przykład:

background:
url(top.png) 0 0 no-repeat,
url(middle.png) 100px 0 no-repeat,
url(tile.png);

Warto również wspomnieć o małym tricku, który spowoduje wyświetlenie awaryjnego tła, jeśli coś pójdzie nie tak, dotyczy to głównie starych przeglądarek, które będę ignorowały kolejne wersje deklaracji nowego tła.

W kodzie musi się zatem znaleźć następujący kawałek:

background: url(fallback.png) 0 0 no-repeat;

Następnie kod z deklaracjami kolejnych teł.

Jeśli nie jesteście pewni w jakiej kolejności grafiki będę implementowane, to warto zapoznać się z obszerną dokumentacja na ten temat pod TYM linkiem.

foto: sxc.hu

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

skomentuj »