A background-clip tulajdonság segítségével megadhatjuk, hogy a háttérkép vagy háttérkép egy doboz mely területén helyezkedjen el.
Használható kulcsszavak :
border-box: a háttér területe a szegély területét és magában foglalja. Alapértelmezett érték.
padding-box: a háttér területe a tartalom-doboz és a belső margó területét foglalja magában.
content-box: a háttér területe csak a tartalom-doboz területét foglalja magában.
A háttér területének beállítása:
kijelölő
{
background-clip
:
kulcsszó;
}
Példa:
Forráskód
<style>
div {
background-color:#66ffff;
border:10px dashed blue;
width: 100px; height:60px;
margin:10px; padding:10px;}
#div1 {background-clip:border-box;}
#div2 {background-clip:padding-box;}
#div3 {background-clip:content-box;}
</style>
….
<body>
<div id="div1">border-box; </div>
<div id="div2">padding-box; </div>
<div id="div3">content-box; </div>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: hatter_clip.html