Fondul elementului
Fondul elementului este descris în CSS cu proprietatea background. Practic, această proprietate reprezintă o abreviere pentru setul următor de proprietăți CSS:
- background-color: stabilește culoarea de fundal
background-color: #ff0507;- background-image: stabilește imaginea de fundal
background-image: url(dubi.png);Această proprietate primește o singură valoare: cuvântul cheie url, după care urmează calea către fișierul imaginei. În acest caz, presupunem că fișierul dubi.png este în aceeași mapă cu pagina web.
De asemenea, se pot folosi adrese URL absolute, de exemplu:
background-image: url(http://localhost.com/someimage.png);Sau se pot folosi adrese URL relative - relative la documentul HTML sau directorul rădăcină al site-ului:
background-image: url(../images/someimage.png); /* cale relativă la documentul HTML */- background-repeat: stabilește modul de repetare a imaginii de fundal pe întreaga suprafață a elementului
- background-size: stabilește dimensiunea imaginii de fundal
- background-position: indică poziția imaginii de fundal
- background-attachment: stabilește stilul de atașare a imaginii de fundal la element
- background-clip: definește zona care este decupată din imagine și utilizată ca fundal
- background-origin: stabilește poziția inițială a imaginii de fundal
De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modelul bloc în CSS3</title>
<style>
div{
width: 250px;
height: 200px;
margin: 10px;
}
.colored{
background-color: #ff0507;
}
.imaged{
background-image: url(dubi.png);
}
</style>
</head>
<body>
<div class="colored">Primul bloc</div>
<div class="imaged">Al doilea bloc</div>
</body>
</html>Primul bloc este colorat într-o nuanță de roșu, iar al doilea bloc stabilește o imagine ca fundal. Toate conținuturile blocului se suprapun peste fundal:
Repetarea imaginii
Pe captura de ecran de mai sus se poate vedea că CSS dimensionează corect imaginea pentru a o potrivi cât mai bine în spațiul elementului. Cu toate acestea, datorită dimensionării, imaginea poate să nu acopere complet suprafața elementului, și de aceea pentru acoperirea completă CSS începe automat să repete imaginea.
Cu proprietatea background-repeat se poate modifica mecanismul de repetare. Aceasta poate lua următoarele valori:
- repeat-x: repetarea pe orizontală
- repeat-y: repetarea pe verticală
- repeat: repetarea pe ambele părți (acțiunea implicită)
- space: imaginea este repetată pentru a umple întreaga suprafață a elementului, dar fără a crea fragmente
- round: imaginea este dimensionată corect pentru a umple complet spațiul
- no-repeat: imaginea nu este repetată
De exemplu:
div{
width: 200px;
height: 150px;
background-image: url(dubi.png);
background-repeat: round;
}Dimensiunea imaginii
Proprietatea background-size permite setarea dimensiunii imaginii de fundal. Pentru setarea dimensiunii se pot folosi unități de măsură, cum ar fi pixeli, procente sau una din valorile prestabilite:
- contain: dimensionează imaginea pentru a se potrivi pe latura cea mai lungă, păstrând raportul de aspect
- cover: dimensionează imaginea pentru a se potrivi pe latura cea mai scurtă, păstrând raportul de aspect
- auto: valoarea implicită, imaginea este afișată la dimensiunea completă
Dacă se dorește dimensionarea imaginii astfel încât să fie optimizată pentru fundal, atunci se pot seta ambele dimensiuni la 100%:
background-size: 100% 100%;Dacă sunt specificate dimensiuni precise, mai întâi se indică lățimea, iar apoi înălțimea imaginii:
background-size: 200px 150px; /* lățimea de 200 pixeli, înălțimea de 150 pixeli */Se poate specifica o valoare precisă pentru una din dimensiuni - lățimea sau înălțimea, iar pentru cealaltă dimensiune se pot seta dimensiuni automate, pentru ca browser-ul să afișeze valori precise:
background-size: 200px auto; /* lățimea de 200 pixeli, înălțimea automată */De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modelul bloc în CSS3</title>
<style>
div{
width: 200px;
height: 150px;
margin: 10px;
border: black solid 1px;
background-image: url(dubi.png);
}
.imaged1{
background-size: cover;
}
.imaged2{
background-size: 140px 110px;
}
</style>
</head>
<body>
<div class="imaged1"></div>
<div class="imaged2"></div>
</body>
</html>În al doilea caz, imaginea va fi dimensionată la 140x110 pixeli. Deoarece mai este spațiu pe element, implicit imaginea va fi repetată pentru a acoperi întreaga suprafață:
Poziționarea imaginii
Proprietatea background-position controlează poziția imaginii de fundal în interiorul elementului. Aceasta poate lua margini de la colțul stânga-sus al elementului în unități de măsură, cum ar fi pixeli, în formatul următor:
background-position: offset_pe_axa_X offset_pe_axa_Y; De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modelul bloc în CSS3</title>
<style>
div{
width: 300px;
height: 250px;
margin: 10px;
border: 1px solid #ccc;
background-color: #eee;
background-image: url(dubi.png);
background-repeat: no-repeat;
background-position: 20px 15px;
}
</style>
</head>
<body>
<div>"Învingătorii nu renunță niciodată, iar cei care renunță nu câștigă niciodată." </div>
</body>
</html>
În plus, această proprietate poate lua una dintre următoarele valori:
- top: aliniere în partea de sus a elementului
- left: aliniere în partea stângă a elementului
- right: aliniere în partea dreaptă a elementului
- bottom: aliniere în partea de jos a elementului
- center: imaginea este plasată în centrul elementului
De exemplu:
background-position: top right;Aici imaginea este aliniată în partea de sus și în partea dreaptă, adică va fi plasată în colțul din dreapta sus al elementului.
background-attachment
Proprietatea background-attachment controlează modul în care imaginea de fundal va fi atașată la element. Această proprietate poate avea următoarele valori:
- fixed: imaginea de fundal a elementului este fixată indiferent de derularea în interiorul elementului
- local: pe măsură ce elementul este derulat în interior, fundalul se modifică
- scroll: fundalul este fix și nu se schimbă în timpul derulării, dar, spre deosebire de fix, mai multe elemente pot utiliza propriul fundal, în timp ce la fix se creează un fundal comun pentru toate elementele
De exemplu:
div{
width: 300px;
height: 250px;
overflow: scroll; /* adăugăm derularea */
border: 1px solid #ccc;
background-image: url(dubi.png);
background-size: 512px 384px;
background-attachment: scroll;
background-repeat: no-repeat;
}background-origin
Proprietatea background-origin indică poziția din imagine de la care va începe imaginea de fundal propriu-zisă pentru element. Aceasta poate avea următoarele valori:
- border-box: imaginea de fundal a elementului începe de la marginea sa exterioară, definită de proprietatea border
- padding-box: fundalul este setat ținând cont de marginile interioare
- content-box: fundalul este setat în funcție de conținutul elementului
Folosim toate cele trei valori:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modelul bloc în CSS3</title>
<style>
div {
width: 200px;
height: 200px;
margin: 10px;
display: inline-block; /* așezăm blocurile într-o linie */
color: #eee;
padding: 15px;
border: 25px solid rgba(23, 23, 23, 0.2);
background-image: url(cats.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.borderBox {
background-origin: border-box;
background-clip: border-box;
/* Dacă este necesar, ajustează poziționarea imaginii de fundal */
background-position: center;
}
.paddingBox {
background-origin: padding-box;
background-clip: padding-box;
/* Dacă este necesar, ajustează poziționarea imaginii de fundal */
background-position: center;
}
.contentBox {
background-origin: content-box;
background-clip: content-box;
/* Dacă este necesar, ajustează poziționarea imaginii de fundal */
background-position: center;
}
</style>
</head>
<body>
<div class="borderBox">
Toată puterea - pisicilor!
</div>
<div class="paddingBox">
Toată puterea - pisicilor!
</div>
<div class="contentBox">
Toată puterea - pisicilor!
</div>
</body>
</html>
background-clip
Proprietatea background-clip definește care parte a imaginii este utilizată pentru fundal. Aceasta acceptă aceleași valori:
- border-box: imaginea este tăiată conform marginilor elementului
- padding-box: partea imaginii care se află sub marginile elementului este exclusă
- content-box: imaginea este tăiată conform conținutului, ținând cont de marginile interioare
De exemplu, dacă aplicăm următoarele stiluri la marcarea anterioară:
div{
width: 200px;
height: 200px;
margin: 10px;
display: inline-block;
color: #eee;
padding:15px;
border: 15px solid rgba(23,23,23,0.1);
background-image: url(cats.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.borderBox{background-clip: border-box;}
.paddingBox{background-clip: padding-box;}
.contentBox{background-clip: content-box;}Atunci vom obține următorul rezultat:
Proprietatea background
Proprietatea background, practic, este un scurtătură pentru toate proprietățile CSS enumerate anterior în formatul:
background: <culoare-fundal> <poziție-fundal> <dimensiune-fundal>
<repetare-fundal> <origin-fundal> <clip-fundal> <atașament-fundal>
<imagine-fundal>De exemplu, dacă avem următorul set de proprietăți:
background-image: url(cats.jpg);
background-color: #eee;
background-repeat: no-repeat;
background-clip: border-box;
background-origin: border-box;
background-attachment: local;Atunci le putem reduce astfel:
background: #eee no-repeat border-box local url(cats.jpg);