Wieloelementowe tło

piątek, 12 marzec 2010 08:44 Administrator
Drukuj

Jedną z ciekawszych nowości dostępnych w wersji roboczej trzeciej specyfikacji CSS jest możliwość umieszczenia kilku fragmentów tła graficznego dla tego samego elementu. Cała operacja nie jest skomplikowana i może wyglądać tak:

DIV

{

width:500px;

height:500px;

background-color:#C0FFC0;

background-image: url(kolo.jpg), url(kula.jpg);

background-position: top left, bottom right;

background-repeat: repeat-x, no-repeat;

}

Zwróć uwagę na pogrubione elementy listingu. Korzystamy z tych samych stylów, które omawiałem przy okazji wstawiania pojedynczego tła, ale po przecinku dopisujemy kolejne wartości. Powyższy przykład ustawia jako tło dwa obrazki i umieszcza je w lewym górnym oraz prawym dolnym narożniku. Poza tym pierwszy z obrazków ma wyłączone powielanie, a drugi ma się powielać w poziomie. Efekt działania przykładowego stylu jest widoczny poniżej.

<<przykład>>

<div class="przyklad">

<div style="width:500px;height:500px;background-color:#C0FFC0;background-image: url(kolo.jpg), url(kula.jpg);background-position: top left, bottom right;background-repeat: repeat-x, no-repeat;">

&nbsp;

</div>

<</przykład>>

Niestety wieloelementowe tło działa w tej chwili jedynie w przeglądarce Chrome i Safari. Użytkownicy Mozilli Firefox, Internet Explorera oraz Opery muszą zadowolić się rysunkiem 15.22.

Rysunek 15.22. Przykład wieloelementowego tła