CSS fona īpašības tiek izmantotas, lai noteiktu fona parametrus elementiem un visam
dokumentam.
CSS īpašības, kas izmanto fona efektu:
- fona krāsu
- fona attēlu
- fona atkārtošanu
- fona pieķeršanos (attachment - tas nozīmē vai fons ir pieāķēts noteiktai vietai)
- fona stāvoklis (pozīcija)
Fona krāsa
Fona krāsu īpašība norāda fona krāsu elementam.
Fona krāsa lapai ir definēta ķermeņa (body) selektorā:
Ar CSS, krāsu visbiežāk norādīda ar:
- HEX vērtība - piemēram, "#FF0000 , #ffffff - tā ir balta krāsa #000000 - tā ir melnā"
- RGB vērtību - piemēram, "RGB (255,0,0)" , to gandrīz neesmu sastapis
- krāsas nosaukums - piemēram, "sarkano" ( p.blue {background-color: blue; }
- ir iespējams ( white, black, blue, red, green, yellow, magenta, cyan ......)
- ir viens online Rīks, kur var uzzināt nepieciešamās krāsas kodu
- https://html-color-codes.info/
Paskaties CSS krāsu vērtības , lai iegūtu pilnu sarakstu ar iespējamiem krāsu vērtībām.
Šajā piemērā zemāk, H1, p, un div elementiem ir piešķirtas dažādas fona krāsas:
Piemērs
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Izmēģiniet to pats »
Fona attēls
Fona attēla īpašība norāda attēlu, kuru izmantot, kā fona elementu.
Pēc noklusējuma attēls tiek atkārtots, lai tā aptver visu saturu (body).
Fona attēlu lapai var iestatīt šādi:
Piemērs
body {background-image:url('paper.gif');}
body {background-image:url('images/my_image.jpg');}
Izmēģiniet to pats »
Zemāk ir piemērs, kur ir slikta fona un teksta kombinācija. Teksts ir gandrīz nav lasāms,
to varēsiet ieraudzīt , ja nospiedīsiet pogu Izmēģiniet to pats:
Fona attēls - Atkārtot horizontāli vai vertikāli
Pēc noklusējuma, fona attēlu īpašiba atkārto attēlu gan horizontāli, gan vertikāli.
Daži attēli ir jāatkārto tikai horizontāli vai vertikāli, vai arī tie izskatīsies dīvaini, piemēram:
Ja attēls ir jāatkārto tikai horizontāli (repeat-x), fons izskatīsies labāk:
Piemērs
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Izmēģiniet to pats »
Fona attēls - Set pozīciju un bez atkārtošanās
 |
Piezīme: Lietojot fona attēlu, izmantojiet attēlu, kas netraucē tekstu. |
|---|
Rāda attēlu tikai vienu reizi tiek noteikts ar fona īpašību ( background-repeat: no-repeat; ):
Piemērs
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
Izmēģiniet to pats »
Iepriekš minētajā piemērā, fona attēls tiek rādīts tajā pašā vietā, kur teksts. Mēs vēlamies,
lai mainītu stāvokli attēla, lai tas netraucē tekstu pārāk daudz.
No attēla atrašanās vieta norādīta ar fona stāvokļa īpašību ( background-position):
Piemērs
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top; (tas nozīmē labajā pusē augsā)
}
Izmēģiniet to pats »
Background - Stenogrāfija(apvienojums) īpašība
Kā jūs varat redzēt no iepriekšminētajiem piemēriem, ir daudzas īpašības,
kas jāņem vērā, strādājot ar fonu.
Lai saīsinātu kodu, tas ir arī iespējams norādīt visas īpašības vienā īpašībā (background).
To sauc par stenogrāfijas (apvienības) īpašību.
Saīsinājums īpašums fons ir vienkārši "background":
Lietojot stenogrāfija īpašumu no nekustamā īpašuma vērtības kārtība ir šāda:
Bet ja jūs lietosiet stenogrāfiju, fona parametru secībai ir ļoti liela nozīme, citādi
parametri neko neietekmēs un secība ir sekojoša , ka iepriekšējā piemērā
- 1 fona krāsa
- 2 fona attēls
- fona atkārtošanās (repeat)
- fona pieķeršanās ( pozīcija piem. : left top; )
- fona stāvoklis (attachment)
Tas nav svarīgi, ja viens no īpašību vērtībām ir pazudis, tik ilgi, kamēr tie, kas pašlaik ir šajā secībā.
Šis piemērs izmanto vairāk uzlabotas CSS. Ieskatieties: Izvērsts piemērs
Vairāk Piemēri
Kā noteikt fiksētu fona attēlu
Šis piemērs parāda, kā noteikt fiksētu fona attēlu. Attēls netiks ritināts ar pārējo lapu.
Visi CSS Fona Properties
| Property | Description |
|---|
| background |
Sets all the background properties in one declaration(visi parametri vienā teikumā) |
| background-attachment |
(nosaka vai fona attēls ir pieāķēts pie satura, tas ir piemēram,kad jūs ritiniet lapu lejā, vai tas fons paliek, vai nē)Sets whether a background image is fixed or scrolls with the rest of the page |
| background-color |
fona krāsa. Sets the background color of an element |
| background-image |
fona attēls. Sets the background image for an element |
| background-position |
pozīcija, kur atrodas fona attēls. Sets the starting position of a background image |
| background-repeat |
vai fona attēls tiek atkārtots. Sets how a background image will be repeated |
|
