Kurs języka HTML i CSS

Poradnik webmastera

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

CSS3 - background-origin

Email Drukuj PDF

Tematy: background-size | background-origin | background-clip

Dane w pigułce
Zastosowanie Definiuje zakres pojemnika zajmowany przez tło
Dziedziczenie nie
Wartości border-box, padding-box, content-box
Wartość domyślna border-box
Przykład background-origin: padding-box
Składnia JavaScript object.style.backgroundOrigin="padding-box"

Aby zdefiniować zajmowaną część, należy wpisać w definicji stylu background-origin : wartość

Obraz, zależnie od wartości, jest zwężany lub rozszerzany - porównaj to z background-clip, gdzie obraz ma zadaną wielkość, ale może być przycinany.

Wartość border-box powoduje, że obraz tła zajmuje całą powierzchnię pojemnika, łącznie z odstępem padding i obramowaniem border, aczkolwiek pod obramowaniem nie jest widoczny.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Wartość padding-box powoduje, że obraz tła zajmuje powierzchnię pojemnika razem z odstępem, ale bez obramowania.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Wartość content-box powoduje, że obraz tła zajmuje powierzchnię pod treścią pojemnika, bez odstępu i obramowania.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ilustracja dla osób, których przeglądarka nie obsługuje polecenia:

background-clip

Interpretacja: Opera, Chrome, Safari, 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