Proprietatea CSS background-origin
Locul în care stă o imagine de fundal în interiorul unui element depinde de proprietatea CSS background-origin.
Fiecare dintre cele trei valori ale ei numește marginea din al cărei colț din stânga sus pornește imaginea:
padding-box- marginea de padding, de unde pornește imaginea în mod implicit.border-box- marginea chenarului elementului.content-box- marginea de conținut a elementului.
Notă: Dacă setezi background-attachment la „fixed”, această proprietate nu mai are niciun efect.
Exemplu
Aici, trei elemente div au în comun un chenar, padding și o imagine de fundal fără repetare, iar fiecare folosește o altă valoare pentru background-origin, ca să le poți compara.
Prompt
Creați o pagină cu trei elemente div, fiecare cu un chenar, padding și o imagine de fundal. Primul div folosește
background-origin: padding-box, al doilea folosește border-box, iar al treilea folosește content-box. Setați background-repeat: no-repeat pentru toate trei, astfel încât diferența de poziționare să fie vizibilă.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS background-origin Property</title>
<style>
div.example {
border: 10px dashed black;
padding: 35px;
background-image: url("img_flwr.gif");
background-repeat: no-repeat;
margin-bottom: 20px;
height: 200px;
}
#div1 {
background-origin: padding-box;
}
#div2 {
background-origin: border-box;
}
#div3 {
background-origin: content-box;
}
</style>
</head>
<body>
<h2>CSS background-origin Property</h2>
<p>background-origin: padding-box (default):</p>
<div class="example" id="div1">
</div>
<p>background-origin: border-box:</p>
<div class="example" id="div2">
</div>
<p>background-origin: content-box:</p>
<div class="example" id="div3">
</div>
</body>
</html>