Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Wieloelementowe tło

Email Drukuj PDF

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

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15281201