Opțiuni de fundal, imagine de fundal

Puteți specifica un fundal pentru o piesă de text (un element încorporat), un element bloc, un tabel, celula și întreaga pagină Web. Un fundal bine ales poate anima o pagină Web și poate evidenția elementele sale individuale.







Fundalul elementelor individuale, diferit de fundalul paginii web în sine, trebuie stabilit numai în cazuri extreme. În caz contrar, pagina Web va deveni prea colorată și inconfortabilă de citit.

Atributul de stil de fundal-culoare servește la setarea culorii de fundal:

Culoarea poate fi setată sub forma unui cod RGB sau a unui nume. Valoarea transparentă elimină complet fundalul; atunci elementul paginii Web va primi un fundal "transparent". În mod implicit, fundalul pentru elementele paginii Web lipsește, iar fundalul paginii web este setat de browserul Web.

BODY fundal-culoare: negru>

Aici am setat un fundal negru și un text alb pentru întreaga pagină Web.

Atributul de stil de fundal vă permite să atribuiți o imagine grafică (fundal) ca fundal:

Valoarea "none" înlătură fundalul grafic.

Fundalul grafic este afișat în partea superioară a fundalului normal stabilit cu atributul de stil de culoare de fundal. Și dacă imaginea de fundal conține fragmente "transparente" (această posibilitate este susținută de formatele GIF și PNG), acest fundal va străluci prin ele.

TABLE.yellow fundal-imagine: url ("/ yellow_background.png")>

Aici am setat tabelul atât pentru fundalul grafic, cât și pentru fundalul grafic. Aceasta, apropo, este o practică obișnuită în designul web.

Dacă imaginea de fundal este mai mică decât elementul de web-pagini (sau Web-site-ul în sine), pentru care este definit, Web-browser-ul va repeta această imagine până la „Zamosc“ pentru a le întregul element. Parametrii acestei repetări specifică atributul de stil repetat în fundal:

Există patru valori disponibile.


- no-repeat - imaginea de fundal nu se va repeta; în acest caz, o parte a fundalului elementului de pagină Web va rămâne neîndeplinită.







- repetați - imaginea de fundal va fi repetată orizontal și vertical (comportament normal).

- repeat-x - imaginea de fundal se va repeta numai orizontal.

- repeat-y - imaginea de fundal va fi repetată numai vertical.

Folosind atributul de stil de poziție de fundal, puteți specifica poziția imaginii de fundal față de elementul paginii web pentru care este atribuită:

background-position: <горизонтальная позиция> [<вертикальная позиция>] |
moștenesc;

Poziția orizontală a imaginii de fundal este specificată în următorul format:

O valoare numerică indică orizontal poziția imaginii de fundal într-un element de pagină Web și poate fi specificată utilizând oricare dintre unitățile CSS acceptate (a se vedea tabelul 8.1). De asemenea, puteți specifica următoarele valori:

- stânga - imaginea de fundal este apăsată pe marginea din stânga a elementului paginii Web (acesta este un comportament normal);

- centru - este situat în centru;

- dreapta - este apăsată pe marginea dreaptă.

Formatul pentru setarea poziției verticale a imaginii de fundal este după cum urmează:

O valoare numerică indică poziția imaginii de fundal într-un element de pagină Web vertical și poate fi specificată utilizând oricare dintre unitățile CSS acceptate.

Sunt posibile și următoarele valori:

- sus - imaginea de fundal este apăsată pe marginea superioară a elementului paginii Web (acesta este un comportament normal);

- centru - este situat în centru;

- partea de jos - se apasă pe marginea inferioară.

Dacă pentru orice element al paginii Web este afișată orizontal numai poziția imaginii de fundal, se consideră că poziția sa verticală este egală cu centrul.

TABLE.bgr (pozitie fundal: 1cm in sus>

Acest stil plasează imaginea de fundal la 1 cm de la marginea din stânga a elementului paginii Web și o apasă pe marginea de jos a acestui element.

Dar stilul care apasă imaginea de fundal la marginea dreaptă a elementului paginii Web și o plasează vertical în centrul acestui element:

TABLE.bgr (fundal-poziție: dreapta>

Când defilați conținutul unei pagini Web într-o fereastră de browser, imaginea de fundal (dacă există) este derulată împreună cu ea. Standardul CSS oferă o caracteristică amuzantă - interzicerea derulării fundalului grafic al unei pagini Web și fixarea acesteia pe loc. Atributul de atașament de fundal controlează fixarea fundalului:

Valoarea de defilare determină browserul Web să deruleze fundalul împreună cu conținutul paginii Web (acesta este comportamentul implicit). Valoarea fixă ​​fixează fundalul în loc și nu va derula.

Probabil, este logic să reparăm numai setul de fundal grafic pentru pagina Web în sine. Fundalul grafic pentru elementele individuale ale unei pagini Web nu ar trebui să fie stabilit.

În acest moment, vom încheia cu atributele stilului CSS.







Articole similare

Trimiteți-le prietenilor: