Utilizarea CSS pentru a seta o imagine de fundal

• Aprilie 19, 2024

V-ați întrebat vreodată cum gestionează site-urile site-urile acelea frumoase modele și imagini care plutesc în spatele textului? Totul este făcut prin magia foilor de stil Cascading. CSS nu numai că vă permite să desemnați o imagine pentru fundalul paginii dvs., ci vă permite, de asemenea, să modificați modul în care este afișată imaginea - astfel încât să puteți obține doar aspectul dorit.

Blocul de bază fundamental pentru imaginea de fundal este, suficient de potrivit, proprietatea „imagine-fundal”. Utilizați această proprietate pentru a informa site-ul dvs. unde se află fișierul imagine, după cum urmează:

corp {
fundal-imagine: url ("image.gif");
}

Aceasta este tot ce trebuie să faceți pentru a plasa o imagine de fundal pentru pagina dvs. web. Desigur, probabil că veți dori să personalizați cum apare imaginea. Să spunem că doriți ca imaginea dvs. să înceapă din partea de sus a paginii, dar să fie centrată pe orizontală în loc de aliniată la stânga (alinierea implicită). În acest caz, veți dori să adăugați proprietatea „poziție de fundal” la regula CSS:

corp {
fundal-imagine: url ("image.gif");
poziție fundal: partea superioară centrală;
}

Când definiți proprietatea „poziție de fundal”, prima valoare setează alinierea orizontală (stânga, centru sau dreapta), iar cea de-a doua setează alinierea verticală a imaginii (sus, centru sau jos).

În continuare, decideți că doriți să opriți imaginea de pe faianță (repetându-se) pe orizontală, deși doriți ca aceasta să se placheze vertical. Este timpul să scoatem în evidență proprietatea „background-repeping”:

corp {
fundal-imagine: url ("image.gif");
poziție fundal: partea superioară centrală;
fundal-repetare: repetare-y;
}

Setarea valorii pe „repeta-y” spune browserului să modeleze imaginea de fundal de-a lungul axei y, denumită vertical, dar nu axa x (pe orizontală), ceea ce este exact ceea ce ne-am dorit. Dacă doriți să o plăcuțați orizontal, dar nu pe verticală, utilizați în schimb valoarea „repeta-x”; dacă nu ați dorit ca imaginea să se coloreze deloc, dați-i valoarea „nu se repetă”. Valoarea implicită este să modelați imaginea atât pe orizontală cât și pe verticală, așa că dacă aceasta este cea mai bună alegere pentru imaginea dvs., nu trebuie să setați deloc proprietatea „background-repere”.

În sfârșit, puteți arunca o privire asupra proprietății „background-attachment”. În mod implicit, imaginea dvs. va derula pe măsură ce pagina defilează, deci dacă nu repetați imaginea pe verticală și aveți o pagină lungă, imaginea dvs. nu se va extinde până în partea de jos a paginii. Puteți modifica acest lucru setând proprietatea „atașare fundal” la „fix”, ceea ce face ca imaginea de fundal să rămână în același loc de pe monitor, indiferent de modul în care pagina derulează. Acum regulile imaginii de fundal vor arăta astfel:

corp {
fundal-imagine: url („image.gif”);
poziție fundal: partea superioară centrală;
fundal-repetare: repetare-y;
fundal-atașament: fix;
}


Dacă doriți să vă păstrați regulile CSS cât mai mici, puteți combina toate valorile de fundal într-o singură linie utilizând proprietatea „fundal”, astfel:

fundal {
url ("image.gif") partea centrală fixă ​​repetată y;
}

Când utilizați proprietatea „fundal” trebuie să enumerați valorile într-o anumită ordine:
[culoare de fundal (dacă este folosit)] [imagine de fundal] [repetare fundal] [atașare fundal] [poziție fundal]. Puteți lăsa orice valoare de care nu aveți nevoie, trebuie doar să enumerați toate valorile pe care le utilizați în ordinea corespunzătoare sau regula nu va funcționa.

Instrucțiuni Video,: Imagini in HTML. Tutorial + Curs web design online (2018) (Aprilie 2024).