Start Publikacje Tłumaczenia Książki Słownik programistyczny

Promocje Heliona

Bestsellery Heliona

14 Kolory i tło

Spis treści

Za pomocą własności CSS można określić kolor zarówno pierwszego planu jak i tła elementu. W tle można ustawiać wypełnienie kolorem lub obrazy. Własności tła umożliwiają pozycjonowanie obrazu tła, wielokrotne jego powtarzanie oraz decydowanie czy obraz ten powinien być nieruchomy w stosunku do obszaru widoku, czy przewijać się wraz z dokumentem.

Składnia wartości określających kolory została opisana w podrozdziale o jednostkach kolorów.

14.1 Kolor pierwszego planu: własność 'color'

'color'

Wartość:	<color> \| inherit
Wartość domyślna:	zależy od aplikacji klienckiej
Zastosowanie:	wszystkie elementy
Dziedziczenie:	tak
Wartości procentowe:	nie dotyczy
Media:	wizualne
Wartość obliczana:	jak określono

Własność ta służy do określania koloru pierwszego planu treści tekstowej elementu. Kolor czerwony można określić na różne sposoby:

em { color: red }              /* Predefiniowana nazwa koloru */
em { color: rgb(255,0,0) }     /* Zakres RGB 0-255   */

14.2 Tło

W tle elementu (tzn. na jego powierzchni prezentowanej) można ustawić wypełnienie kolorem lub obraz. W modelu polowym, "tło" oznacza podłoże obszarów treści, dopełnienia oraz obramowania. Kolor i styl obramowania ustawia się za pomocą własności obramowania. Marginesy są zawsze przezroczyste.

Własności tła nie są dziedziczne, ale tło elementu nadrzędnego prześwituje domyślnie, ponieważ początkowa wartość własności 'background-color' to 'transparent'.

Tło elementu głównego staje się tłem kanwy i pokrywa całą kanwę oraz zostaje "zaczepione" ('background-position') w tym samym miejscu, w którym byłoby, gdyby zostało namalowane tylko dla samego elementu głównego. Element główny nie rysuje tła ponownie.

Jednak autorom dokumentów HTML zalecamy określanie tła dla elementu BODY, a nie HTML. W dokumentach, których elementem głównym jest element "HTML" (język HTML) lub "html" (język XHTML) wartości obliczone 'transparent' własności 'background-color' i 'none' własności 'background-image' muszą zostać przez aplikacje klienckie zamienione na wartości obliczone tych samych własności elementów "BODY" (język HTML) lub "body" (język XHTML) podczas rysowania tła kanwy. Tło elementów "BODY" lub "body" nie powinno wówczas być już rysowane. Tła takie powinny być zaczepione w tym samym miejscu, w którym byłyby zaczepione gdyby były rysowane tylko dla elementu głównego.

Zgodnie z tymi zasadami, kanwa poniższego dokumentu HTML będzie miała tło "marmurkowe":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <TITLE>Ustawianie tła kanwy</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://example.com/marble.png") }
    </STYLE>
    <P>Moje tło jest marmurkowe.

Należy zauważyć, że reguła dla elementu BODY zadziała, mimo że w źródle dokumentu znacznik ten został pominięty, ponieważ parser HTML domyślnie doda brakujący element.

Tła elementów tworzących konteksty stosowe (zobacz własność 'z-index') są rysowane na dole tego kontekstu stosowego, pod wszystkim co się znajduje na stosie.

14.2.1 Własności tła: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' oraz 'background'

'background-color'

Wartość:	<color> \| transparent \| inherit
Wartość domyślna:	transparent
Zastosowanie:	wszystkie elementy
Dziedziczenie:	nie
Wartości procentowe:	nie dotyczy
Media:	wizualne
Wartość obliczana:	jak określono

Własność ta służy do ustawiania koloru tła elementów. Wartość <color> służy do ustawienia konkretnego koloru, a wartość 'transparent' powoduje, że tło jest przezroczyste.

h1 { background-color: #F00 }

'background-image'

Wartość:	<uri> \| none \| inherit
Wartość domyślna:	none
Zastosowanie:	wszystkie elementy
Dziedziczenie:	nie
Wartości procentowe:	nie dotyczy
Media:	wizualne
Wartość obliczana:	bezwzględny URI lub 'none'

Własność ta służy do określania obrazu tła elementu. Przy ustawianiu obrazu tła należy również określić jego kolor, który zostanie zastosowany, gdy obraz będzie niedostępny. Gdy obraz jest dostępny, jest on rysowany nad kolorem wypełnienia. (Jeśli obraz tła zawiera przezroczyste obszary, kolor będzie przez nie prześwitywał.)

Własność ta przyjmuje następujące wartości: <uri> — lokalizacja obrazu, lub 'none' — brak obrazu.

body { background-image: url("marble.png") }
p { background-image: none }

Wymiary wewnętrzne wyrażone procentowo muszą zostać wyliczone względem wymiarów prostokąta ustanawiającego układ współrzędnych dla własności 'background-position'.

Jeśli obraz ma wewnętrzną szerokość lub wysokość i wewnętrzny współczynnik proporcji, brakujący wymiar zostaje obliczony przy użyciu dostępnych informacji.

Jeśli obraz ma wewnętrzną szerokość lub wysokość i nie ma wewnętrznego współczynnika proporcji, brakujący wymiar zostaje określony jako równy rozmiarowi prostokąta ustanawiającego układ współrzędnych dla własności 'background-position'.

Jeśli obraz nie ma wymiarów wewnętrznych i ma wewnętrzny współczynnik proporcji, musi zostać przyjęte, że wymiary te są największe z możliwych przy takim współczynniku, przy zachowaniu warunku, że żaden wymiar nie przekroczy wymiarów prostokąta ustanawiającego układ współrzędnych dla własności 'background-position'.

Jeśli obraz nie ma również wewnętrznego współczynnika proporcji, musi zostać przyjęte, że jego wymiary są równe wymiarom prostokąta ustanawiającego układ współrzędnych dla własności 'background-position'.

'background-repeat'

Wartość:	repeat \| repeat-x \| repeat-y \| no-repeat \| inherit
Wartość domyślna:	repeat
Zastosowanie:	wszystkie elementy
Dziedziczenie:	nie
Wartości procentowe:	nie dotyczy
Media:	wizualne
Wartość obliczana:	jak określono

Jeśli zostanie zdefiniowany obraz tła, własność ta określa czy obraz ten ma być w tle powtarzany i, jeśli tak, to w jaki sposób. Powtarzający się obraz pokrywa obszary treści, dopełnienia i obramowania pola.

Powtarzanie i położenie obrazu tła elementów śródliniowych są w niniejszej specyfikacji niezdefiniowane. W przyszłej wersji CSS powtarzanie i pozycjonowanie obrazu tła w elementach śródliniowych może zostać zdefiniowane.

Opis wartości:

repeat: Obraz jest powtarzany zarówno w poziomie jak i pionie.
repeat-x: Obraz jest powtarzany w poziomie.
repeat-y: Obraz jest powtarzany w pionie.
no-repeat: Powtarzanie obrazu jest wyłączone: zostaje narysowany tylko jeden egzemplarz obrazu.

body { 
  background: white url("pendant.png");
  background-repeat: repeat-y;
  background-position: center;
}

Obraz tła ustawiony na środku
z kopiami powtarzającymi się w górę i w dół obszarów dopełnienia i treści. [O]

Jeden egzemplarz obrazu został ustawiony na środku i nad oraz pod nim zostały ustawione jego kopie.

'background-attachment'

Wartość:	scroll \| fixed \| inherit
Wartość domyślna:	scroll
Zastosowanie:	wszystkie elementy
Dziedziczenie:	nie
Wartości procentowe:	nie dotyczy
Media:	wizualne
Wartość obliczana:	jak określono

Jeśli obraz tła jest zdefiniowany, własność ta określa czy jest on ustawiony na stałe względem obszaru widoku ('fixed'), czy przewija się wraz z blokiem zawierającym ('scroll').

Należy zauważyć, że w każdym widoku jest tylko jeden obszar widoku. Jeśli element ma mechanizm przewijania (zobacz własność 'overflow'), tło stałe ('fixed') nie porusza się wraz z tym elementem, a tło przewijane ('scroll') nie porusza się z mechanizmem przewijania.

Nawet jeśli tło jest stałe, widać je tylko, gdy znajduje się w obszarze treści, dopełnienia lub obramowania elementu. Dlatego, jeśli obraz nie jest powtarzany ('background-repeat: repeat'), może być niewidoczny.

Poniższe reguły tworzą nieskończoną pionową kolumnę, która pozostaje "przyklejona" do obszaru widoku podczas przewijania elementu.

body { 
  background: red url("pendant.png");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

Aplikacje klienckie nie obsługujące teł stałych (np. z powodu ograniczeń platformy sprzętowej) powinny ignorować deklaracje zawierające słowo kluczowe 'fixed'. Na przykład:

body {
  background: white url(paper.png) scroll; /* Dla wszystkich aplikacji klienckich */
  background: white url(ledger.png) fixed; /* Dla aplikacji klienckich, które obsługują tła stałe */
}

Aby uzyskać szczegółowe informacje, zobacz podrozdział o zgodności.

'background-position'

Wartość:	[ [ <percentage> \| <length> \| left \| center \| right ] [ <percentage> \| <length> \| top \| center \| bottom ]? ] \| [ [ left \| center \| right ] \|\| [ top \| center \| bottom ] ] \| inherit
Wartość domyślna:	0% 0%
Zastosowanie:	wszystkie elementy
Dziedziczenie:	nie
Wartości procentowe:	odnoszą się do rozmiaru samego pola
Media:	wizualne
Wartość obliczana:	dla <length> — wartość bezwzględna; w pozostałych przypadkach — procent

Jeśli został określony obraz tła elementu, własność ta określa jego początkowe położenie. Jeśli tylko jedna wartość jest podana, druga zostaje automatycznie ustawiona na 'center'. Jeśli przynamniej jedna wartość nie jest słowem kluczowym, pierwsza wartość reprezentuje położenie w poziomie, a druga — w pionie. Dozwolone są ujemne wartości typu <percentage> i <length>.

<percentage>: Procent X wyrównuje punkt znajdujący się w odległości X% od boku lub górnej albo dolnej krawędzi obrazu z punktem znajdującym się w odległości X% od boku albo górnej lub dolnej krawędzi pola dopełnienia elementu. Jeśli na przykład zostanie zastosowana wartość '0% 0%', lewy górny róg obrazu zostanie wyrównany z lewym górnym rogiem pola dopełnienia. Wartość '100% 100%' ustawia prawy dolny róg obrazu w prawym dolnym rogu pola dopełnienia. Wartość '14% 84%' ustawia punkt znajdujący się w odległości 14% szerokości obrazu od jego lewej krawędzi i 84% wysokości obrazu od jego górnej krawędzi w punkcie znajdującym się w takich samych odległościach od lewej i górnej krawędzi pola dopełnienia.
<length>: Wartość L wyrównuje lewy górny róg obrazu w odległości L od lewej krawędzi lub górnej krawędzi pola dopełnienia elementu. Jeśli na przykład zostanie zastosowana wartość '2cm 1cm', lewy górny róg obrazu zostanie ustawiony w odległości 2 cm od lewej krawędzi i 1 cm od górnej krawędzi pola dopełnienia.
top: Odpowiednik wartości '0%' dla położenia pionowego.
right: Odpowiednik wartości '100%' dla położenia poziomego.
bottom: Odpowiednik wartości '100%' dla położenia pionowego.
left: Odpowiednik wartości '0%' dla położenia poziomego.
center: Odpowiednik '50%' dla położenia poziomego, jeśli nie jest określone inaczej, lub '50%' dla położenia pionowego, jeśli jest.

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śli obraz tła jest ustawiony na stałe w obszarze widoku (zobacz własność 'background-attachment'), obraz ten jest ustawiany względem obszaru widoku zamiast pola dopełnienia elementu. Na przykład

body { 
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

W powyższym przykładzie pojedynczy obraz zostanie umieszczony w prawym dolnym rogu obszaru widoku.

'background'

Wartość:	[<'background-color'> \|\| <'background-image'> \|\| <'background-repeat'> \|\| <'background-attachment'> \|\| <'background-position'>] \| inherit
Wartość domyślna:	zobacz indywidualne własności
Zastosowanie:	wszystkie elementy
Dziedziczenie:	nie
Wartości procentowe:	dozwolone dla 'background-position'
Media:	wizualne
Wartość obliczana:	zobacz indywidualne własności

'background' to własność zbiorcza służąca do ustawiania indywidualnych własności tła (tj. 'background-color', 'background-image', 'background-repeat', 'background-attachment' oraz 'background-position') w jednym miejscu.

Jeśli deklaracja jest poprawna, własność 'background' najpierw ustawia wszystkie poszczególne własności tła na ich wartości domyślne, a następnie przypisuje im wartości określone w tej deklaracji.

W pierwszej z poniższych reguł została określona tylko wartość dla własności 'background-color'. Pozostałe własności indywidualne zostaną ustawione na ich własności domyślne. W drugiej regule wszystkie własności indywidualne zostały określone.

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 Korekcja gamma

Informacje na ten temat korekcji można znaleźć w przewodniku opublikowanym w specyfikacji PNG ([PNG]).

Uwaga: podczas obliczania korekcji gamma aplikacje klienckie wyświetlające obraz na monitorze CRT mogą przyjąć założenie idealnego CRT i zignorować wszelkie efekty spowodowane przez dithering. To oznacza, że ich minimum do wykonania na danej platformie to:

Komputer PC z systemem MS Windows: nic
System Unix z systemem X11: nic
Komputer Mac używający QuickDraw: zastosowanie korekcji gamma 1.45 [ICC42] (aplikacje znające ColorSync mogą po prostu przekazać profil ICC sRGB do API ColorSync w celu dokonania odpowiedniej korekty kolorów)
Komputer SGI z systemem X: zastosowanie wartości gamma z /etc/config/system.glGammaVal (wartość domyślna wynosi 1.70; aplikacje działające w systemie Irix 6.2 lub nowszym mogą po prostu przekazać profil ICC sRGB do systemu zarządzania kolorami)
Komputer NeXT z systemem NeXTStep: zastosowanie wartości gamma 2.22

"Zastosowanie korekcji gamma" oznacza, że każda z trzech składowych: R, G i B musi zostać przekonwertowana na R'=R^gamma, G'=G^gamma, B'=B^gamma, przed przekazaniem do systemu operacyjnego.

Można to zrobić szybko tworząc 256-elementową tablicę wyszukiwania jeden raz przy każdym uruchomieniu przeglądarki:

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

Dzięki temu można uniknąć wykonywania działań przestępnych dla każdego atrybutu koloru i znacząco zmniejszyć ich ilość dla pikseli.