Cascading Style Sheets (CSS) nivelul 3, cunoscut și sub denumirea de CSS3, introduce mai multe imagini de fundal. Puteți lista mai multe imagini de fundal, separându-le pe fiecare cu o virgulă și setați modul în care acestea se afișează folosind proprietăți de fundal, cum ar fi „fundal-poziție” și „fundal-repetare”. Atâta timp cât fiecare set de valori corespunde ordinii adreselor URL ale imaginii, aceste proprietăți vor produce efectele dorite. De asemenea, puteți utiliza „background-attachment” pentru a crea un fundal fix pe ecran atunci când utilizatorii derulează în sus sau în jos.
1
Deschideți pagina dvs. Web în Notepad sau un editor de cod pentru a vedea codul acesteia. Căutați elementul HTML unde doriți să aplicați mai multe fundaluri fixe și găsiți numele ID-ului său:
Conţinut...2
Derulați până în partea de sus a codului și localizați eticheta "" care face referire la foaia de stil:
Găsiți numele foii de stil pe care doriți să o editați în atributul „href” al etichetei „”. Dacă codul dvs. include mai multe etichete, căutați cel care indică foaia de stil generală, mai degrabă decât fișierele cu nume precum "print" sau "IE".
3
Deschideți foaia de stil în Notepad sau în editorul de cod. Căutați numele codului elementului HTML în cod. Adăugați acest selector în partea de jos a codului dvs. dacă nu îl găsiți:
}
4
Setați proprietatea „background-image” între acoladele după selector:
imagine de fundal: URL (cale / către / primul-bg.png), URL (cale / spre / al doilea-bg.png);
}
Separați fiecare adresă URL cu o virgulă pentru a afișa mai multe imagini de fundal. Setați calea din fiecare paranteză la adresa URL a unei imagini de fundal pe care doriți să o utilizați.
5
Porniți o linie goală sub „background-image” și adăugați proprietatea „background-position”:
fundal-poziție: stânga sus, 100px 200px;
Setați poziția fiecărui fundal în aceeași ordine în care apar în lista de adrese URL „imagine de fundal”. În exemplul de mai sus, „first-bg.png” este setat să se afișeze în colțul din stânga sus al elementului HTML. „Second-bg.png” va afișa apoi 100 de pixeli în jos din partea de sus și 200 de pixeli distanță de marginea stângă a elementului HTML. De asemenea, puteți utiliza valori procentuale precum „80% 20%”.
6
Setați „background-attachment” sub proprietatea „background-position”:
background-attachment: fix, scroll;
Utilizați „fix” atunci când doriți ca o imagine de fundal să persiste pe ecran chiar și în timp ce utilizatorul derulează în sus sau în jos pe pagina web. Setarea implicită este „scroll”.
7
Adăugați o nouă linie sub „background-attachment” și adăugați proprietatea „background-repeat”. Setați această proprietate la „fără repetare” pentru fiecare imagine de fundal pe care nu doriți să o țiglăți:
background-repeat: no-repeat, repeat-x;
Utilizați „repeat-x” sau „repeat-y” pentru a repeta o imagine pe axa „Y” (verticală) sau „X” (orizontală) a unui element HTML.
