Promocje Heliona
Bestsellery Heliona
5.3 Własności kolorów i tła
Własności kolorów i tła służą do określania koloru tekstu (ang. foreground color) oraz tła elementu (powierzchni, na której wyświetlana jest zawartość elementu). Jako tło można stosować nie tylko określone kolory, ale również grafikę. Dodatkowo można kontrolować takie własności tła jak: pozycja obrazka w tle, czy i jak ma się on powtarzać oraz czy tło ma być ruchome czy nie względem obszaru roboczego.
Własność „color” jest dziedziczona w normalny sposób. Wartości własności tła, natomiast nie są dziedziczone, ale tło elementu rodzica prześwituje przez element potomka, ze względu na fakt, że domyślna wartość dla własności „background-color” to „transparent” (ang. prześwitujący).
5.3.1 „color”
Wartości: <color>
Wartość domyślna: zależna od klienta
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
Własność ta służy do określania koloru tekstu znajdującego się w obrębie danego elementu. Istnieje kilka sposobów na określenie koloru tekstu:
EM { color: red } /* język naturalny */
EM { color: rgb(255,0,0) } /* wartość RGB od 0 do 255 */
W rozdziale 6.3 znajduje się dokładniejszy opis metod zapisu kolorów.
5.3.2 „background-color”
Wartości: <color> | transparent
Wartość domyślna: transparent
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Własność ta służy do określania koloru tła elementu.
H1 { background-color: #F00 }
5.3.3 „background-image”
Wartości: <url> | none
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Własność taut ten służy do określania obrazu mającego służyć jako tło danego elementu. Ustawiając jako tło grafikę powinno się zawsze podawać także kolor tła, na wypadek gdyby obraz był z jakiegoś powodu niedostępny. Jeżeli obraz jest dostępny, to nałoży się on na zdefiniowany kolor.
BODY { background-image: url(marble.gif) }
P { background-image: none }
5.3.4 „background-repeat”
Wartości: repeat | repeat-x | repeat-y | no-repeat
Wartość domyślna: repeat
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Własność „background-repeat” służy do kontrolowania sposobu powtarzania się obrazu w tle oraz do określania czy ma się on w ogóle powtarzać.
Wartość „repeat” oznacza, że obrazek ma się powtarzać zarówno w pionie jak i w poziomie. Wartość „repeat-x” oznacza, że obrazek będzie powtarzał się tylko w poziomie, a repeat-y tylko w pionie. Wartość „no-repeat” powoduje brak powtarzania.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
W powyższym przykładzie obrazek powtarza się tylko w pionie.
5.3.5 „background-attachment”
Wartości: scroll | fixed
Wartość domyślna: scroll
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Własność „background-attachment” jest używany, gdy jako tło elementu określono obraz. Za jego pomocą można określić czy grafika w tle ma pozostać nieruchoma w miarę przewijania dokumentu, czy też przewijać się razem z jego zawartością.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
CSS1 core: Aplikacje klienckie mogą wartość własności „fixed” traktować jako „scroll”. Rekomenduje się jednakże, aby wartość własności „fixed” była interpretowana poprawnie przynajmniej dla elementów HTML i BODY ponieważ brak jest jakichkolwiek sposobów definiowania grafiki tylko dla tych aplikacji, które obsługują wartość „fixed” (patrz rozdział 7).
5.3.6 „background-position”
Wartości: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Wartość domyślna: 0% 0%
Zastosowanie: elementy blokowe i osadzone
Dziedziczenie: nie
Wartości procentowe: odnoszące się do rozmiaru samego elementu
Jeżeli jako tło elementu zastosowano obraz graficzny, to własność „background-position” służy do określania jego pozycji początkowej.
Wartość „0% 0%” powoduje, że lewy górny róg obrazu jest wyrównany do lewego górnego rogu elementu (bez otaczjących go marginesów i dopełnienia oraz obramowania). Wartość „100% 100%” umieszcza prawy dolny róg obrazu w prawym dolnym rogu elementu. Wartość „14% 84%” powoduje że punkt znajdujący się w odległości 14% szerokości obrazu od lewej krawędzi obrazu i 84% wysokości obrazu od górnej krawędzi obrazu zostanie umieszczony w analogicznym punkcie elementu.
Wartość „2cm 2cm” umieszcza lewy górny róg obrazu w punkcie znajdującym się w odległości 2cm od lewej i górnej krawędzi elementu.
Jeżeli podana jest tylko jedna wartość (procentowa lub w jednostkach miary), to zostanie ona użyta do określenia pozycji w poziomie, a pozycja w pionie automatycznie zostanie ustawiona na 50%. Jeżeli podane są obie wartości, to pierwsza z nich określa pozycję w poziomie. Wartości procentowe i zwykłe można stosować razem, np. „50% 2cm”. Dozwolone są także wartości ujemne.
Dostępny jest także zestaw słów kluczowych służących do określania pozycji tła. Słów kluczowych nie można mieszać z wartościami liczbowymi. Poniżej znajduje się lista możliwych słów kluczowych i objaśnienie ich znaczenia:
- „top left” i „left top” - to samo co „0% 0%”.
- „top”, „top center” oraz „center top” - to samo co „50% 0%”.
- „right top” i „top right” - to samo co „100% 0%”.
- „left”, „left center” oraz „center left” - to samo co „0% 50%”.
- „center” i „center center” - to samo co „50% 50%”.
- „right”, „right center” oraz „center right” - to samo co „100% 50%”.
- „bottom left” i „left bottom” - to samo co „0% 100%”.
- „bottom”, „bottom center” oraz „center bottom” - to samo co „50% 100%”.
- „bottom right” i „right bottom” - to samo co „100% 100%”.
Przykłady:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
Jeżeli obraz w tle jest nieruchomy (po zastosowaniu własności „background-attachment”) względem powierzchni roboczej, to jego położenie ustalane jest względem powierzchni roboczej, a nie elementu.
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
Powyższy przykład spowoduje umieszczenie obrazu w tle w prawym dolnym rogu powierzchni roboczej.
5.3.7 „background”
Wartości: <background-color> || <background-image> || <background-repeat>
|| <background-attachment> || <background-position>
Wartość domyślna: Brak dla własności zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: tylko dla <background-position>
„background” jest własnością zbiorczą służącą do określania wszystkich dostępnych własności tła („background-color”, „background-image”, „background-repeat”, „background-attachment” oraz „background-position”) w jednym miejscu arkusza stylów.
Możliwe wartości odpowiadają wartościom dostępnym dla wszystkich poszczególnych własności.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
Własność „background” służy do definiowania wszystkich własności tła. W pierwszej regule powyżej zdefiniowano tylko kolor tła („background-color”), w związku z czym pozostałe własności przyjęły wartości domyślne. W drugiej regule natomiast, wartości wszystkich własności zostały określone.
Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.
Copyright © 2004 W3C® (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, znaku towarowego, używania dokumentu i licencji oprogramowania.