logo

CSS fons

CSS fona rekvizīts tiek izmantots, lai definētu elementa fona efektus. Ir 5 CSS fona rekvizīti, kas ietekmē HTML elementus:

  1. fona krāsa
  2. fona attēls
  3. fona atkārtojums
  4. fona pielikums
  5. fona pozīcija

1) CSS fona krāsa

Rekvizīts fona krāsa tiek izmantots, lai norādītu elementa fona krāsu.

listnode

Fona krāsu var iestatīt šādi:

 h2,p{ background-color: #b0d4de; } <h2>My first CSS page.</h2> <p>Hello Javatpoint. This is an example of CSS background-color.</p> 
Izmēģiniet to tagad

Izvade:

Mana pirmā CSS lapa.

Sveiki Javapoint. Šis ir CSS fona krāsas piemērs.

java karte

2) CSS fona attēls

Fona attēla rekvizīts tiek izmantots, lai iestatītu attēlu kā elementa fonu. Pēc noklusējuma attēls aptver visu elementu. Šādai lapai varat iestatīt fona attēlu.

salīdzināt ar virkni
 body { background-image: url(&apos;paper1.webp&apos;); margin-left:100px; } 
Izmēģiniet to tagad

4) CSS fona pielikums

Rekvizīts background-attachment tiek izmantots, lai norādītu, vai fona attēls ir fiksēts, vai pārlūkprogrammas logā ritiniet kopā ar pārējo lapu. Ja iestatāt fiksētu fona attēlu, attēls nepārvietosies pārlūkprogrammas ritināšanas laikā. Ņemsim piemēru ar fiksētu fona attēlu.

 background: white url(&apos;bbb.webp&apos;); background-repeat: no-repeat; background-attachment: fixed; 
Izmēģiniet to tagad

5) CSS fona pozīcija

Fona pozīcijas rekvizīts tiek izmantots, lai definētu fona attēla sākotnējo pozīciju. Pēc noklusējuma fona attēls tiek novietots tīmekļa lapas augšējā kreisajā stūrī.

Varat iestatīt šādas pozīcijas:

  1. centrs
  2. tops
  3. apakšā
  4. pa kreisi
  5. pa labi
 background: white url(&apos;good-morning.webp&apos;); background-repeat: no-repeat; background-attachment: fixed; background-position: center; 
Izmēģiniet to tagad