Fundaluri multiple CSS. Proprietățiile background-size, background-origin, background-clip. Proprietatea background shorthand.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
În acest capitol veți învăța cum să adăugați mai multe imagini de fundal la un element.
Veți afla, de asemenea, despre următoarele proprietăți:
- background-size
- background-origin
- background-clip
Diferitele imagini de fundal sunt separate prin virgule, iar imaginile sunt stivuite una peste alta, unde prima imagine este cea mai apropiată de privitor.
Următorul exemplu are două imagini de fundal, prima imagine este o floare (aliniată la partea de jos și la dreapta/ bottom and right), iar a doua imagine este un fundal de hârtie (aliniat la colțul din stânga sus/ top-left corner):
Exemplu:
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Mai multe imagini de fundal pot fi specificate utilizând fie proprietățiile de fundal individuale (ca mai sus), fie proprietatea background shorthand.Următorul exemplu utilizează proprietatea background shorthand (același rezultat ca și exemplul de mai sus):
Exemplu:
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}