Ai putea crede că designul de fundal este simplu, dar CSS are multe proprietăți obscure și puternice pe care să le înveți.

Tema de fundal a site-ului dvs. poate afecta în mod semnificativ aspectul și simțul acestuia. Culorile, imaginile și modelele de fundal invocă emoție și creează experiențe excelente pentru utilizator.

Puteți utiliza proprietățile de fundal CSS pentru a seta stilul de fundal al elementelor HTML. Aflați totul despre unele dintre proprietățile CSS pe care le puteți utiliza pentru a crea fundaluri excelente.

1. culoare de fundal

The proprietate de culoare de fundal setează culoarea fundalului unui element. Puteți seta culoarea folosind un nume precum „roșu”, o valoare HEX ca „#00FF00” sau o valoare RGB - cum ar fi „rgb (0, 255, 0)”. De asemenea, puteți utiliza o valoare HSL pentru a seta culoarea de fundal folosind nuanța, saturația și luminozitatea.

Următorul exemplu setează culoarea de fundal a întregii pagini la portocaliu. Elementele de titlu primesc fiecare un fundal diferit.

instagram viewer 
<corp>
<h2>Eu sunt Verdeh2>
<h3>Eu sunt Roșuh3>
<h4>Eu sunt Albastruh4>
corp>

Folosind CSS, puteți aplica o culoare unică de fundal fiecărui element:

corp {
culoare de fundal: portocale;
}
h2 {
culoare de fundal: #006600;
}


h3 {
culoare de fundal: rgb(128, 0, 0);
}
h4{
culoare de fundal: hsl(240, 100%, 50%);
}

Aceasta va stila pagina astfel încât să arate astfel:

Puteți utiliza proprietatea opacitate pentru a determina transparența unui element. Opacitatea ia valori între 0,0 și 1,0. Cu cât valoarea este mai mică, cu atât elementul este mai transparent.

De exemplu, încercați să setați opacitatea unui element de corp la 0,5:

corp {
culoare de fundal:portocale;
opacitate:0.5;
}

Aceasta se va afișa după cum urmează - comparați culorile cu cele din captura de ecran anterioară:

2. imagine de fundal

Proprietatea background-image setează o imagine ca fundal al unui element. Puteți face referire la o imagine locală sau una de pe internet.

<corp>
 <h1>Buna ziuaAcolo!h1>
 <p>euaveaunimagineînAle melefundal!p>
corp>

Fișierul CSS:

corp {
imagine de fundal:url ("https://imagini.pexeli.com/fotografii/1191710/pexels-photo-1191710.jpeg?auto=comprima&cs=tinysrgb&w=1260&h=750&dpr=1");
}

Aceasta se va afișa astfel:

De asemenea, puteți utiliza gradiente de fundal pentru a crea un aspect unic pentru aplicația dvs.

3. fundal-repetare

Proprietatea background-image repetă imaginile în mod implicit. Puteți alege să repetați imaginea orizontal pe axa x sau vertical pe axa y.

Alternativ, dacă o repetare nu se potrivește stilului tău, o poți elimina folosind valoarea fără repetare.

<corp>
<h1>Salutare!h1>
<h3>Demonstrez proprietatea de repetare a fundalului-repetare pe axa x!h3>
corp>

Utilizați următorul CSS pentru a aplica un fundal care se repetă de-a lungul axei x:

corp {
imagine de fundal: url("https://imagini.pexeli.com/fotografii/459335/pexels-photo-459335.jpeg?auto=comprima&cs=tinysrgb&w=1260&h=750&dpr=1");
fundal-repetare: repeta-x;
}

Rezultatul:

Apoi, încercați să repetați imaginea pe axa y:

corp {
imagine de fundal:url ("https://cdn.pixabay.com/fotografie/2016/04/18/22/05/scoici-1337565__340.jpg");
fundal-repetare:repeat-y;
}

Rezultatul:

Exemplul de pe axa y cu siguranță pare distorsionat. Dacă acestea nu sunt modelele pe care le căutați, puteți specifica fără repetare in schimb:

corp {
imagine de fundal:url ("https://imagini.pexeli.com/fotografii/259915/pexels-photo-259915.jpeg?auto=comprima&cs=tinysrgb&w=600");
fundal-repetare:nu-repeta;
}

Rezultatul:

4. fundal-poziție

Proprietatea background-position definește poziția imaginii de fundal în cadrul elementului său. Folosește cuvinte cheie specifice poziției, cum ar fi centru, top, și fund, sau un pixel sau o valoare procentuală.

Adăugați o proprietate de poziție de fundal la ultima imagine:

corp {
imagine de fundal: url("https://imagini.pexeli.com/fotografii/259915/pexels-photo-259915.jpeg?auto=comprima&cs=tinysrgb&w=600");
fundal-poziție: topcentru;
}

Va arăta astfel:

Puteți vedea că imaginea distorsionează aspectul site-ului. Să reparăm asta cu următoarea proprietate.

5. dimensiunea fundalului

Puteți utiliza proprietatea imagine de fundal pentru a defini o anumită dimensiune pentru imagine. Folosește cuvinte cheie precum acoperi și conține sau un pixel sau o valoare procentuală. Să reparăm imaginea de fundal distorsionată adăugând o proprietate fundal-size.

corp {
 imagine de fundal: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 background-repeat: fără repetare;
 fundal-poziție: centru;

Rezultatul arată că imaginea acoperă acum pagina web proporțional.

6. atașament de fundal

Proprietatea fundal-attachment definește dacă poziția imaginii de fundal rămâne fixă ​​sau defilează. Puteți folosi cuvintele cheie fix sau derulați.

Să arătăm asta în următorul cod:

<corp>
<h1>Proprietatea atașament de fundalh1>
<p>Cu proprietatea atașată fixă ​​veți observa că fundalul nu se mișcă odată cu textul.p>
<p>Cu proprietatea atașată fixă ​​veți observa că fundalul nu se mișcă odată cu textul.p>
<p>Cu proprietatea atașată fixă ​​veți observa că fundalul nu se mișcă odată cu textul.p>
<p>Cu proprietatea atașată fixă ​​veți observa că fundalul nu se mișcă odată cu textul.p>
<p>Cu proprietatea atașată fixă ​​veți observa că fundalul nu se mișcă odată cu textul.p>
<p>Cu proprietatea atașată fixă ​​veți observa că fundalul nu se mișcă odată cu textul.p>
<p>Cu proprietatea atașată fixă ​​veți observa că fundalul nu se mișcă odată cu textul.p>
<p>Cu proprietatea atașată fixă ​​veți observa că fundalul nu se mișcă odată cu textul.p>
<p>Cu proprietatea atașată fixă ​​veți observa că fundalul nu se mișcă odată cu textul.p>
<p>Cu proprietatea atașată fixă ​​veți observa că fundalul nu se mișcă odată cu textul.p>
<p>Cu proprietatea atașată fixă ​​veți observa că fundalul nu se mișcă odată cu textul.p>
<p>Cu proprietatea atașată fixă ​​veți observa că fundalul nu se mișcă odată cu textul.p>
corp>

Fișierul CSS:

corp {
imagine de fundal: url("https://imagini.pexeli.com/fotografii/96627/pexels-photo-96627.jpeg?auto=comprima&cs=tinysrgb&w=600");
fundal-repetare: fără repetare;
fundal-poziție: centru;
dimensiunea fundalului: acoperi;
atașament de fundal: fix;
}

Dacă vă deplasați în jos pe pagină, veți observa că fundalul nu se mișcă:

Pentru a demonstra proprietatea derulare fundal-atașament, schimbați cuvântul cheie în sul. Veți observa că acum fundalul se mișcă odată cu textul.

corp {
imagine de fundal: url("https://imagini.pexeli.com/fotografii/96627/pexels-photo-96627.jpeg?auto=comprima&cs=tinysrgb&w=600");
fundal-repetare: fără repetare;
fundal-poziție: centru;
dimensiunea fundalului: acoperi;
atașament de fundal: sul;
}

7. Proprietatea Stenografie de fundal

Este posibil să observați că trebuie să includeți mai multe proprietăți pentru a obține fundalul perfect. Aceasta presupune scrierea multor coduri. Dar puteți scurta codul folosind proprietatea scurtă de fundal.

Proprietatea scurtă vă permite să setați multe proprietăți de fundal într-o singură linie. Folosești cuvântul cheie fundal pentru a seta proprietatea stenografie.

De exemplu, în loc să scrieți cod ca acesta:

corp {
culoare de fundal: verde;
imagine de fundal: url("laptop3.jpg");
fundal-repetare: fără repetare;
dimensiunea fundalului: acoperi;
atașament de fundal: sul;
fundal-poziție: centru;
}

Îl poți scrie într-o singură linie, astfel:

corp {
fundal: verdeurl("laptop3.jpg") fără repetareacoperisulcentru;
}

Proprietatea scurtă urmează o anumită ordine. Trebuie să aliniați proprietățile în această ordine, chiar dacă una sau mai multe lipsesc. Comanda este:

  • culoare de fundal
  • imagine de fundal
  • fundal-repetare
  • atașament de fundal
  • fundal-poziție

Puteți crea modele interesante cu CSS folosind diverse modele de fundal. Cu aceste modele, puteți obține fundaluri unice și remarcabile pentru site-ul dvs.

Alte proprietăți de fundal în CSS

CSS este puternic și puteți face multe cu el pentru a vă condimenta aplicația. Puteți utiliza proprietăți precum clipul de fundal, originea fundalului și modul de amestecare a fundalului pentru a adăuga o animație.

De asemenea, puteți utiliza degrade și modele pentru a vă personaliza paginile. Experimentați cu proprietățile de fundal CSS pentru a vă îmbunătăți abilitățile de design web.