CSS3 Fundaluri
CSS3 conține un nou câteva proprietăți de fond, care permit un control mai mare al elementului de fond.
În acest capitol veți învăța cum să adăugați mai multe imagini de fundal pentru un element.
Veți învăța, de asemenea, despre următoarele proprietăți noi CSS3:
-
background-size -
background-origin -
background-clip
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit-, -moz- sau -o- specificați prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 multiple fundaluri
CSS3 vă permite să adăugați mai multe imagini de fundal pentru un element, prin background-image proprietate.
Fundalul imagini diferite sunt separate prin virgule, iar imaginile sunt suprapuse unul peste altul, în cazul în care prima imagine este cel mai apropiat de privitorului.
Următorul exemplu are două imagini de fundal, prima imagine este o floare (aligned to the bottom and right) , iar a doua imagine este un fond de hârtie (aligned to the 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;
} Încearcă - l singur » Imagini de fundal multiple pot fi specificate folosind fie proprietățile de fond individuale (as above) sau de background proprietatea stenografie.
Exemplul următor utilizează background proprietatea stenografie (același rezultat ca în exemplul de mai sus):
Exemplu
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} Încearcă - l singur » Dimensiune CSS3 Context
CSS3 background-size proprietate vă permite să specificați dimensiunea de imagini de fundal.
Înainte de CSS3, dimensiunea unei imagini de fond a fost dimensiunea reală a imaginii. CSS3 ne permite să re-utilizarea de imagini de fundal în diferite contexte.
Dimensiunea poate fi specificată în lungimi, procente, sau prin utilizarea unuia dintre cele două cuvinte cheie: conțin sau capac.
Exemplul următor redimensionează o imagine de fundal mult mai mică decât imaginea originală (using pixels) :
Imaginea de fundal original:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
imagine de fundal redimensionat:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Aici este codul:
Exemplu
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Încearcă - l singur » Celelalte două valori posibile pentru background-size sunt contain și cover .
contain cuvinte cheie scalează imaginea de fundal să fie cât mai mare posibil (but both its width and its height must fit inside the content area) se (but both its width and its height must fit inside the content area) în (but both its width and its height must fit inside the content area) de (but both its width and its height must fit inside the content area) . Ca atare, în funcție de proporțiile imaginii de fundal și zona de poziționare de fundal, pot exista unele zone ale fundalului, care nu sunt acoperite de imaginea de fundal.
De cover cheie scalează imaginea de fundal , astfel încât zona de conținut este complet acoperit de imaginea de fundal (atât lățimea și înălțimea sunt egale sau depășesc zona de conținut). Ca atare, unele părți ale imaginii de fundal să nu fie vizibile în zona de poziționare fundal.
Exemplul următor ilustrează utilizarea contain și cover :
Exemplu
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Încearcă - l singur » Defini dimensiunile de imagini de fundal multiple
background-size proprietate acceptă și valori multiple pentru dimensiunea de fundal (using a comma-separated list) , atunci când se lucrează cu medii multiple.
Următorul exemplu a trei imagini de fundal specificate, cu diferite background-size valoare pentru fiecare imagine:
Exemplu
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} Încearcă - l singur » Full Size Imagine de fundal
Acum vrem să avem o imagine de fundal pe un site care acoperă întreaga fereastra browser-ului în orice moment.
Cerințele sunt următoarele:
- Se umple întreaga pagină cu imaginea (no white space)
- Micșorați imaginea după cum este necesar
- Centrul de imagine de la pagina
- Nu provoca scrollbar
Următorul exemplu arată cum să facă acest lucru; Utilizați elementul HTML (the html element is always at least the height of the browser window) - (the html element is always at least the height of the browser window) . Apoi, setați un fundal fix și centrat pe ea. Apoi ajustați dimensiunea sa , cu background-size proprietate:
Exemplu
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
} Încearcă - l singur » CSS3 de background-origin Proprietatea
CSS3 de background-origin proprietate specifică în cazul în care imaginea de fundal este poziționat.
Proprietatea are trei valori diferite:
- border-box - imaginea de fundal pornește de la colțul din stânga sus al frontierei
- padding-box - (default) imaginea de fundal pornește de la colțul din stânga sus al marginii padding
- content-box - imaginea de fundal pornește de la colțul din stânga sus al conținutului
Exemplul următor ilustrează background-origin proprietate:
Exemplu
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Încearcă - l singur » CSS3 background-clip de proprietate
CSS3 background-clip proprietate specifică zona de pictura de fundal.
Proprietatea are trei valori diferite:
- border-box - (default) fundalul este pictat la marginea exterioară a frontierei
- padding-box - fundalul este pictat la marginea exterioară a capitonării
- content-box - fundalul este pictat în caseta de conținut
Exemplul următor ilustrează background-clip proprietate:
Exemplu
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »
Proprietăți CSS3 Context
| Proprietate | Descriere |
|---|---|
| background | O proprietate prescurtare pentru stabilirea tuturor proprietăților de fond într-o singură declarație |
| background-clip | Specifică zona de vopsire a fundalului |
| background-image | Specifică una sau mai multe imagini de fundal pentru un element |
| background-origin | Specifică unde fundalul image(s) este / sunt poziționate |
| background-size | Specifică dimensiunea fundalului image(s) |