CSS3 - background-clip

CSS3 - background-clip
Dodał pwimmer
poniedziałek, 07 luty 2011 17:45
div.divclip { width: 252px; height: 144px; padding: 20px; background:url("/images/stories/css3/tlokot.jpg");
background-repeat: no-repeat; border:10px solid lightgreen; background-size: 417px 241px; } #div1 {
background-clip: content-box; } #div2 { background-clip: padding-box; } #div3 { background-clip: border-box; }
Tematy: background-size | background-origin | background-clip
Dane w pigułce
Zastosowanie
Definiuje sposób przycięcia obrazu tła
Dziedziczenie
nie
Wartości
content-box, padding-box, border-box
Wartość domyślna
border-box
Przykład
background-clip: padding-box
Składnia JavaScript
object
.style.backgroundClip="padding-box"
Aby zdefiniować przycięcie obrazu tła, należy wpisać w definicji stylu background-clip : wartość
Obraz ma stałą wielkość, ale może być przycinany - porównaj to z background-origin, gdzie obraz może być
zwężany lub rozszerzany. div { width: 252px; height: 144px; padding: 20px; background:url(tlokot.jpg);
background-repeat: no-repeat; border:10px solid lightgreen; background-size: 417px 241px; background-clip:
content-box; }
background-clip:content-box; - określa przycięcie obrazka tła do wielkości treści pojemnika.
background-clip:padding-box; - określa przycięcie obrazka tła do wielkości treści pojemnika i odstępu.
background-clip:border-box; - określa przycięcie obrazka tła do wielkości treści pojemnika, odstępu i
obramowania..
Uwaga: wartości padding-box i border-box wydają się tu renderować taki sam efekt. Być może to niedoskonałość
interpretacji.
Ilustracja dla posiadaczy przeglądarek nieobsługujących polecenia:
Interpretacja: Opera, Firefox 4, Internet Explorer 9.
1/1