Proprietatea CSS background-clip
Proprietatea CSS background-clip decide dacă fundalul (culoare, imagine sau gradient) se oprește la chenar, la padding sau la conținut.
Trei valori descriu unde se termină desenarea:
border-box- Desenarea continuă până sub chenar, iar asta obții dacă nu setezi nimic.padding-box- Desenarea se termină acolo unde începe chenarul, pe marginea lui interioară.content-box- Desenarea rămâne în interiorul zonei de conținut, până la marginea ei.
Background clip cu imagine
O imagine de fundal decupată în trei moduri cu background-clip:
Prompt
Afișați trei div-uri cu chenar punctat și padding, fiecare folosind o imagine de fundal (paper.gif) cu o valoare diferită pentru background-clip: border-box, padding-box și content-box.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS background-clip with Image</title>
<style>
#div1 {
border: 5px dotted black;
padding: 35px;
background-image: url("paper.gif");
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-image: url("paper.gif");
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-image: url("paper.gif");
background-clip: content-box;
}
div {
margin-bottom: 15px;
}
</style>
</head>
<body>
<h2>background-clip: border-box (default):</h2>
<div id="div1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>background-clip: padding-box:</h2>
<div id="div2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>background-clip: content-box:</h2>
<div id="div3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>
Background clip cu culoare
Aceleași trei valori background-clip, de data aceasta pe o culoare de fundal:
Prompt
Afișați trei div-uri cu chenar punctat și padding, fiecare folosind o culoare de fundal lightblue cu o valoare diferită pentru background-clip: border-box, padding-box și content-box.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS background-clip with Color</title>
<style>
#div1 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: content-box;
}
div {
margin-bottom: 15px;
}
</style>
</head>
<body>
<h2>background-clip: border-box (default):</h2>
<div id="div1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>background-clip: padding-box:</h2>
<div id="div2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>background-clip: content-box:</h2>
<div id="div3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>
Proprietăți CSS avansate pentru fundal
Aceste proprietăți avansate alcătuiesc familia CSS pentru fundal:
background- Proprietate prescurtată care setează toate proprietățile de fundal într-o singură declarație.background-clip- Decide zona în care este desenat fundalul.background-image- Îi dă unui element una sau mai multe imagini de fundal.background-origin- Setează punctul de plecare pentru poziționarea imaginii (imaginilor) de fundal.background-size- Controlează cât de mare apare imaginea (imaginile) de fundal.