Właściwość pochodzenia tła CSS
Przykład
Niech obraz tła zaczyna się od lewego górnego rogu treści:
#example1 {
border: 10px dashed black;
padding:
25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość background-origin
określa położenie początkowe (obszar pozycjonowania tła) obrazu tła.
Uwaga: Ta właściwość nie działa, jeśli dołączanie w tle jest „naprawione”.
Domyślna wartość: | padding-box |
---|---|
Dziedziczny: | nie |
Animowalny: | nie. Przeczytaj o animacji |
Wersja: | CSS3 |
Składnia JavaScript: | obiekt .style.backgroundOrigin="content-box" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Property | |||||
---|---|---|---|---|---|
background-origin | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
Składnia CSS
background-origin: padding-box|border-box|content-box|initial|inherit;
Wartości nieruchomości
Value | Description | Play it |
---|---|---|
padding-box | Default value. The background image starts from the upper left corner of the padding edge | |
border-box | The background image starts from the upper left corner of the border | |
content-box | The background image starts from the upper left corner of the content | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Ustaw dwa obrazy tła dla elementu <div>. Niech obraz tła „paper.gif” zaczyna się od lewego górnego rogu krawędzi dopełnienia, a obraz tła „img_tree.gif” zaczyna się od lewego górnego rogu treści:
#example1 {
border: 10px dashed black;
padding: 25px;
background: url(img_tree.gif), url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box, padding-box;
}
Powiązane strony
Samouczek CSS: tła CSS
Odniesienie HTML DOM: właściwość backgroundOrigin