docRozmiar tła
download 
Reklamacja Transkrypt
Rozmiar tła
Rozmiar tła
Dodał Administrator
piątek, 12 marzec 2010 08:36
background-size
Dostępne wartości:
wartość bezwzględna | wartość względna | auto | contain |
cover | inherit
Wartość domyślna:
auto
Przykład:
body {background-size:50% 100%;}
Dziedziczenie:
Nie
Obsługa:
Chrome
Wstępna wersja trzeciej specyfikacji CSS daje nam możliwość określenia rozmiaru tła. Korzystając ze stylu
background-size, możemy określić zarówno wysokość, jak i szerokość graficznego tła ustawionego dla
dowolnego elementu strony. Regulując rozmiar tła, możemy skorzystać z wartości:
bezwzględnych: np. 1 cm 1 cm (wysokość, szerokość);
względnych: np. 50% 50% (wysokość, szerokość);
auto — rozmiar (szerokość i wysokość) tła będzie automatycznie dopasowywany do okna przeglądarki;
cover — skaluje obraz przy zachowaniu proporcji boków do najmniejszych wartości, tak by dało się pokryć tłem
cały obszar;
contain — skaluje obraz przy zachowaniu proporcji boków do największych wartości, tak by dało się pokryć tłem
cały obszar.
Określenie jednej wartości powoduje, że druga zostanie automatycznie zastąpiona przez opcję auto. Nie możemy
korzystać z wartości ujemnych.
1/3
Rozmiar tła
Dodał Administrator
piątek, 12 marzec 2010 08:36
Przykład stylu wykorzystującego tło o określonym rozmiarze może mieć następującą postać:
BODY
{
background-image:url(tlo.jpg);
background-size:30% 30%;
}
Przykład działania powyższego arkusza zobaczą jedynie posiadacze przeglądarki Chrome. Natomiast
użytkownicy wszystkich pozostałych przeglądarek muszą się zadowolić rysunkiem 15.20.
<<przykład>>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">
<title>Tytuł Strony WWW</title>
<style type="text/css">
BODY
{
background-image:url(tlo.jpg);
moz-background-size:30% 30%;
}
}
</style>
</head>
<body>
</div>
</body>
</html>
<</przykład>>
Rysunek 15.20. Przykład strony z wymiarowanym graficznym tłem
2/3
Rozmiar tła
Dodał Administrator
piątek, 12 marzec 2010 08:36
3/3
