Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - tło

CSS3 - background-clip

Email Drukuj PDF

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.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V