Wartość border-box jest domyślną wartością właściwości background-clip.
Domyślnie tło elementu HTML jest przycięte do obszaru wyznaczonego przez zewnętrzne krawędzie obramowania tego elementu HTML.
Gdy element HTML posiada właściwość background-attachment wraz z wartością local oraz właściwość overflow wraz z wartością różną od wartości visible, wtedy wartość "border-box" działa na takiej samej zasadzie jak wartość padding-box.
background-clip:border-box;
tło tego elementu "div" jest przycięte do obszaru wyznaczonego przez zewnętrzne krawędzie obramowania tego elementu "div"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
border:15px dashed black;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
tło tego elementu "div" jest przycięte do obszaru wyznaczonego przez zewnętrzne krawędzie obramowania tego elementu "div"
</div>
</body>
</html>
Za pomocą wartości padding-box właściwości background-clip możemy sprawić, że tło interesującego nas elementu HTML zostanie przycięte do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu HTML.
background-clip:padding-box;
tło tego elementu "div" zostało przycięte do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-clip" wraz z wartością "padding-box"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-clip:padding-box;
border:15px dashed black;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
tło tego elementu "div" zostało przycięte do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-clip" wraz z wartością "padding-box"
</div>
</body>
</html>
Za pomocą wartości content-box właściwości background-clip możemy sprawić, że tło interesującego nas elementu HTML zostanie przycięte do obszaru wyznaczonego przez rozmiar obszaru zawartości tego elementu HTML.
background-clip:content-box;
tło tego elementu "div" zostało przycięte do obszaru wyznaczonego przez rozmiar obszaru zawartości tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-clip" wraz z wartością "content-box"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-clip:content-box;
border:15px dashed black;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
tło tego elementu "div" zostało przycięte do obszaru wyznaczonego przez rozmiar obszaru zawartości tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-clip" wraz z wartością "content-box"
</div>
</body>
</html>
Jeżeli zdecydowaliśmy się na to, aby tło interesującego nas elementu HTML składało się z kilku obrazków jednocześnie, wtedy za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości background-clip możemy określić osobny sposób przycięcia poszczególnych obrazków tworzących tło obrazkowe interesującego nas elementu HTML (kolor tła elementu HTML zostanie przycięty na podstawie ostatniej wartości występującej w sekwencji wartości właściwości background-clip).
Podana przez nas sekwencja wartości właściwości "background-clip" nie może zawierać wartości globalnych.
Jeżeli podana przez nas sekwencja wartości właściwości "background-clip" będzie zawierała mniejszą liczbę wartości niż liczba obrazków tworzących tło obrazkowe elementu HTML, wtedy przeglądarka internetowa powtórzy podaną przez nas sekwencję wartości właściwości "background-clip" tak, aby uzyskać wystarczającą liczbę wartości.
background-clip:content-box, padding-box;
pierwszy obrazek tworzący tło obrazkowe tego elementu "div" został przycięty do obszaru wyznaczonego przez rozmiar obszaru zawartości tego elementu "div", natomiast drugi obrazek tworzący tło obrazkowe tego elementu "div" został przycięty do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div" (kolor tła tego elementu "div" również został przycięty do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div"), ponieważ do tego elementu "div" została dodana właściwość "background-clip" wraz z następującą sekwencją wartości: "content-box, padding-box"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:url(https://webkod.pl/files/css/obrazek-o1.png), url(https://webkod.pl/files/css/obrazek-o2.png);
background-repeat:no-repeat, no-repeat;
background-clip:content-box, padding-box;
border:15px dashed black;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
pierwszy obrazek tworzący tło obrazkowe tego elementu "div" został przycięty do obszaru wyznaczonego przez rozmiar obszaru zawartości tego elementu "div", natomiast drugi obrazek tworzący tło obrazkowe tego elementu "div" został przycięty do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div" (kolor tła tego elementu "div" również został przycięty do obszaru wyznaczonego przez zewnętrzne krawędzie marginesów wewnętrznych tego elementu "div"), ponieważ do tego elementu "div" została dodana właściwość "background-clip" wraz z następującą sekwencją wartości: "content-box, padding-box"
</div>
</body>
</html>
