Przycinanie tła {background-clip}
W jaki sposób usunąć tło spod wewnętrznych marginesów elementu, ale wyświetlić je pod treścią?
CSS 3
selektor { background-clip: przycinanie }Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].
Natomiast jako "przycinanie" należy wpisać:
Natomiast jako "przycinanie" należy wpisać:
- border-box - tło wyświetli się pod obramowaniem, marginesem wewnętrznym i właściwą zawartością elementu (domyślnie) [Zobacz: Model pudełkowy]
- padding-box - tło wyświetli się pod marginesem wewnętrznych i właściwą zawartością elementu
- content-box - tło wyświetli się tylko pod właściwą zawartością elementu
Możliwe jest również określenie kilku wartości przycinania - kiedy wstawiamy w tle więcej niż jeden obrazek:
selektor { background-clip: przycinanie obrazka 1, przycinanie obrazka 2,... }Przykład {background-clip}
border-box
padding-box
content-box
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
background-clip: wartość | 1 2008-12-11 | 4 2011-03-22 | 12 2015-07-29 | 10.5 2010-03-02 | 5 2010-06-07 |
background-clip: border-box | 1 2008-12-11 | 4 2011-03-22 | 12 2015-07-29 | 15 2013-07-02 | 3 2007-10-26 |
background-clip: content-box | 1 2008-12-11 | 4 2011-03-22 | 12 2015-07-29 | 10.5 2010-03-02 | 3 2007-10-26 |
background-clip: padding-box | 1 2008-12-11 | 4 2011-03-22 | 12 2015-07-29 | 15 2013-07-02 | 3 2007-10-26 |