Ultimele tutoriale de dezvoltare web
 

CSS fundaluri

❮ precedent Capitolul următor ❯

Proprietățile CSS de fond sunt folosite pentru a defini efectele de fundal pentru elemente.

Proprietăți CSS fundal:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Culoare de fundal

background-color de background-color proprietate specifică culoarea de fundal a unui element.

Culoarea de fundal a unei pagini este setat ca aceasta:

Exemplu

body {
    background-color: lightblue;
}
Încearcă - l singur »

Cu CSS, o culoare este cel mai adesea specificat de:

  • un nume de culoare validă - cum ar fi "red"
  • o valoare HEX - cum ar fi "#ff0000"
  • o valoare RGB - cum ar fi " rgb(255,0,0) "

Uită - te la valori de culoare CSS pentru o listă completă de posibile valori de culoare.

In exemplul de mai jos, <h1>, <p> și <div> elemente au fundal culori diferite:

Exemplu

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}
Încearcă - l singur »

Imagine de fundal

background-image Proprietatea specifică o imagine pentru ao folosi ca fundal al unui element.

În mod implicit, imaginea se repetă astfel încât să acopere întregul element.

Imaginea de fundal pentru o pagină poate fi setat astfel:

Exemplu

body {
    background-image: url("paper.gif");
}
Încearcă - l singur »

Mai jos este un exemplu dintr-o combinație proastă de text și imagine de fundal. Textul este greu poate fi citit:

Exemplu

body {
    background-image: url("bgdesert.jpg");
}
Încearcă - l singur »

Note: Atunci când se utilizează o imagine de fundal, utilizați o imagine care nu deranjează textul.

Imaginea de fundal - Se repetă orizontal sau vertical

În mod implicit, background-image Proprietatea repeta o imagine atât pe orizontală cât și pe verticală.

Unele imagini trebuie repetată numai pe orizontală sau pe verticală, sau se va arata ciudat, ca aceasta:

Exemplu

body {
    background-image: url("gradient_bg.png");
}
Încearcă - l singur »

Dacă imaginea de mai sus se repetă numai pe orizontală ( background-repeat: repeat-x; ) , fundalul va arata mai bine:

Exemplu

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}
Încearcă - l singur »

Note: Pentru a repeta o imagine set vertical background-repeat: repeat-y;

Imaginea de fundal - Setați poziția și fără repetare

Se afișează imaginea de fundal o singură dată este , de asemenea , specificat de background-repeat - background-repeat proprietate:

Exemplu

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}
Încearcă - l singur »

În exemplul de mai sus, imaginea de fundal este afișată în același loc ca și textul. Vrem să schimbăm poziția imaginii, astfel încât să nu perturbe textul prea mult.

Poziția imaginii este specificată de background-position de proprietate:

Exemplu

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}
Încearcă - l singur »

Imaginea de fundal - poziție fixă

Pentru a specifica faptul că imaginea de fundal ar trebui să fie fixate (will not scroll with the rest of the page) se background-attachment (will not scroll with the rest of the page) , utilizați background-attachment proprietate:

Exemplu

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}
Încearcă - l singur »

Context - proprietate de stenografie

Pentru a scurta codul, este de asemenea posibil să se specifice toate proprietățile de fond într-o singură proprietate unică. Aceasta se numește o proprietate prescurtare.

Proprietatea prescurtare pentru fundal este de background :

Exemplu

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}
Încearcă - l singur »

Când se utilizează proprietatea prescurtare ordinea valorilor de proprietate este:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Nu contează dacă una dintre valorile de proprietate lipsesc, atâta timp cât celelalte sunt, în această ordine.

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »

Toate proprietățile CSS Context

Proprietate Descriere
background Setează toate proprietățile de fond într-o singură declarație
background-attachment Setează dacă o imagine de fundal este fix sau pergamente cu restul paginii
background-color Setează culoarea de fundal a unui element
background-image Setează imaginea de fundal pentru un element
background-position Setează poziția de pornire a unei imagini de fundal
background-repeat Setează modul în care o imagine de fundal se va repeta

❮ precedent Capitolul următor ❯