Ïàðàìåòðû ôîíà
Ôîí ìîæíî îïðåäåëÿòü êàê äëÿ âñåé html-ñòðàíèöû, òàê è äëÿ îòäåëüíûõ åå ýëåìåíòîâ: òåêñòà, òàáëèöû, ÿ÷ååê òàáëèöû è ïðî÷.
Öâåò ôîíà â CSS îïðåäåëÿåò àòðèáóò ñòèëÿ background-color:
background-color: <color>
Öâåò ìîæíî çàäàâàòü ïðè ïîìîùè RGB-êîäà èëè èìåíè. Çíà÷åíèå transparent çàäàåò ïðîçðà÷íûé ôîí.
Ïî óìîë÷àíèþ ôîí ó ýëåìåíòîâ html-ñòðàíèöû îòñóòñòâóåò; ôîí html-ñòðàíèöû îïðåäåëÿåòñÿ áðàóçåðîì.
Ïðè ïîìîùè àòðèáóòà ñòèëÿ background-image â êà÷åñòâå ôîíà ìîæíî çàäàâàòü ãðàôè÷åñêîå (ôîíîâîå) èçîáðàæåíèå:
background-image: url("<àäðåñ èçîáðàæåíèÿ>")
Çíà÷åíèå none óáèðàåò ãðàôè÷åñêèé ôîí.
Ìîæíî çàäàâàòü öâåò ôîíà è ôîíîâîå èçîáðàæåíèå îäíîâðåìåííî, ïðè ýòîì "êàðòèíêà" íàêëàäûâàåòñÿ ïîâåðõ îáû÷íîãî ôîíà. Åñëè ôîíîâîå èçîáðàæåíèå ñîäåðæèò ïðîçðà÷íûå îáëàñòè, òî ÷åðåç íèõ áóäåò ïðîñâå÷èâàòüñÿ öâåò ôîíà.
Åñëè ôîíîâîå èçîáðàæåíèå ìåíüøå, ýëåìåíòà html-ñòðàíèöû, äëÿ êîòîðîãî çàäàíî, áðàóçåð áóäåò ïîâòîðÿòü "êàðòèíêó" ôîíà ïîêà íå çàïîëíèò ïðîñòðàíñòâî âñåãî ýëåìåíòà. Ïàðàìåòðû òàêîãî ïîâòîðåíèÿ èçîáðàæåíèÿ çàäàþòñÿ ïðè ïîìîùè àòðèáóòà ñòèëÿ background-repeat:
Çíà÷åíèÿ background-repeat:
- no-repeat - ôîíîâîå èçîáðàæåíèå íå ïîâòîðÿåòñÿ, ÷àñòü ôîíà îñòàåòñÿ ïóñòîé;
- repeat - ôîíîâîå èçîáðàæåíèå ïîâòîðÿåòñÿ ïî ãîðèçîíòàëè è âåðòèêàëè (çíà÷åíèå ïî óìîë÷àíèþ);
- repeat-x - ôîíîâîå èçîáðàæåíèå ïîâòîðÿåòñÿ òîëüêî ïî ãîðèçîíòàëè;
- repeat-y - ôîíîâîå èçîáðàæåíèå ïîâòîðÿåòñÿ òîëüêî ïî âåðòèêàëè.
ÏÐÈÌÅÐ:
BODY {
background-color: #00FF00;
background-image: url("/img/logo.gif");
background-repeat: no-repeat
}
|
background-position - îïðåäåëÿåò ïîçèöèþ ôîíîâîãî èçîáðàæåíèÿ îòíîñèòåëüíî ýëåìåíòà html-ñòðàíèöû:
background-position: <horizontal position> [<vertical position>]
Ôîðìàò äëÿ ãîðèçîíòàëüíîé ïîçèöèè:
<n>|left|right|center
- n - ÷èñëîâîå çíà÷åíèå, êîòîðîå óêàçûâàåò ìåñòîïîëîæåíèå ôîíîâîãî èçîáðàæåíèÿ îòíîñèòåëüíî ýëåìåíòà html-ñòðàíèöû ïî ãîðèçîíòàëè;
- left - ôîíîâîå èçîáðàæåíèå ðàñïîëàãàåòñÿ ó ëåâîãî êðàÿ ýëåìåíòà html-ñòðàíèöû (çíà÷åíèå ïî óìîë÷àíèþ);
- right - ó ïðàâîãî êðàÿ;
- center - ïî öåíòðó.
Ôîðìàò äëÿ âåðòèêàëüíîé ïîçèöèè:
<n>|top|bottom|center
- n - ÷èñëîâîå çíà÷åíèå, êîòîðîå óêàçûâàåò ìåñòîïîëîæåíèå ôîíîâîãî èçîáðàæåíèÿ îòíîñèòåëüíî ýëåìåíòà html-ñòðàíèöû ïî âåðòèêàëè;
- top - ôîíîâîå èçîáðàæåíèå ðàñïîëàãàåòñÿ ó âåðõíåãî êðàÿ ýëåìåíòà html-ñòðàíèöû (çíà÷åíèå ïî óìîë÷àíèþ);
- bottom - ó íèæíåãî êðàÿ;
- center - ïî öåíòðó.
 ñëó÷àå, åñëè çàäàíà òîëüêî ãîðèçîíòàëüíàÿ ïîçèöèÿ ôîíîâîãî èçîáðàæåíèÿ, òî âåðòèêàëüíàÿ ïîçèöèÿ ïðèíèìàåòñÿ ðàâíîé center.
ÏÐÈÌÅÐ:
.tbl {background-position: 5px center}
|
Ïîâåäåíèå ôîíîâîãî èçîáðàæåíèÿ ïðè ïðîêðóòêå html-ñòðàíèöû îïðåäåëÿåòñÿ àòðèáóòîì ñòèëÿ background-attachment.
Çíà÷åíèÿ background-attachment:
- scroll - ôîíîâîå èçîáðàæåíèå ïðîêðó÷èâàåòñÿ âìåñòå ñ html-ñòðàíèöåé;
- fixed - ôîíîâîå èçîáðàæåíèå ôèêñèðóåòñÿ íà ìåñòå.
