Kolory i tła.

Kolory i elementy tła.

Za pomocą deklaracji można sformatować tło, nadawając mu kolory i dobierając zdjęcia lub tapety. Właściwość background w połączeniu z innymi właściwościami pozwala nam uzyskac zakładany efekt. Właściwości background-color i background image nie podlegają dziedziczeniu.

Nazwa deklaracjiKod w headKod w bodyEfekt formatowania
background-color:
orange		p.orange {background-color:
orange;}
<p class="orange"> Dowolny tekst.</p>

Dowolny tekst.

background-color:
#FF8000		p.orange1 {background-color:
#FF8000;}
<p class="orange1"> Dowolny tekst.</p>

Dowolny tekst.

background-color:
FF8000		p.orange2 {background-color:
FF8000;}
<p class="orange2"> Dowolny tekst.</p>

Dowolny tekst.

background-color:
transparent		textarea {background-color:
transparent;}
<textarea rows="1"> Przezroczyste.</textarea>
background-image:
url(../tlo.png)		p.image {background-image:
url(../tlo.png);}
<p class="image"> Dowolny
tekst.</p>

Dowolny
tekst.

background-image:
none		p.none {background-image:
none;}
<p class="none"> Dowolny
tekst.</p>

Dowolny
tekst.

Ponieważ właściwości i wartości background-repeat, background-position oraz background-attachment nie da się jednoznacznie ująć w tabeli, to najlepiej zobaczyć przykładową strony z podanym kodem.

Gradient tła.

Przykłady wartości gradient Kod w head Kod w body Efekt formatowania
linear-gradient(red, green);

linear-gradient(red 100px, green);

linear-gradient(45deg,red, green);

radial-gradient(circle, #f00 50px, #000 30px);

 #gradient{
background:-moz-linear-gradient(left,red,yellow);
background:-webkit-linear-gradient(left,red,yellow);
background:-khtml-linear-gradient(left,red,yellow);
background:-o-linear-gradient(left,red,yellow);
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#cccccc')";
/* IE 6,7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#cccccc'); zoom:1; } 		<div id="gradient">
Tło gradientowe.
</div> 		Efekt jest widoczny poniżej.

Tło gradientowe.




do góry   menu   powrót   naprzód