Właściwość CSSKolory i tła
background-origin
Ustala, od którego obszaru elementu liczona jest pozycja obrazu tła.
- Wartość domyślna
padding-box- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.backgroundOrigin = "content-box"
Przykład
#CSS
.quote {
padding: 24px;
background: url("/icons/quote.svg") no-repeat left top / 24px;
background-origin: content-box;
}HTML przykładu
<blockquote style="margin: 0; padding: 16px 16px 16px 16px; border: 1px solid #333; border-radius: 12px; background: url('/collections/nextjs.png') no-repeat right top / 28px; background-origin: content-box;">Ikona w rogu zachowuje odstęp paddingu, bo background-origin to content-box.</blockquote>Podgląd
Definicja i zastosowanie
#Właściwość background-origin określa punkt odniesienia dla background-position. Domyślnie (padding-box) pozycja 0 0 oznacza lewy górny róg obszaru paddingu, czyli wewnętrzną krawędź obramowania.
Przy content-box obraz startuje od krawędzi treści, więc padding tworzy odstęp wokół niego. Przy border-box obraz zaczyna się już pod obramowaniem.
Właściwość ma znaczenie tylko dla obrazów tła, na kolor tła nie wpływa. Często używa się jej razem z background-clip.
Składnia
#Składnia
background-origin: padding-box | border-box | content-box;Wartości
#- Obraz zaczyna się przy wewnętrznej krawędzi obramowania.
- Obraz zaczyna się pod obramowaniem.
- Obraz zaczyna się od krawędzi treści, za paddingiem.
Wartości w praktyce
#padding-box
Obraz zaczyna się przy wewnętrznej krawędzi obramowania.
.demo { background-origin: padding-box; }border-box
Obraz zaczyna się pod obramowaniem.
.demo { background-origin: border-box; }content-box
Obraz zaczyna się od krawędzi treści, za paddingiem.
.demo { background-origin: content-box; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Jeśli ikona w tle ma zachować odstęp od krawędzi, zamiast liczyć pozycję w pikselach ustaw
content-box. - W skrócie
backgroundpodanie jednego pola, np.content-box, ustawia zarówno origin, jak i clip.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.