Background-clip
CSS vlastnost background-clip určuje, pod kterou částí okolí prvku bude nebo nebude vykresleno pozadí. Obrázkové i barevné.
Normálně se barevné pozadí kreslí pod rámeček, padding a obsah.
Obrázkové pozadí se normálně kreslí jen pod padding a obsah.
| hodnoty | obrázkové pozadí |
|---|---|
| border-box | výchozí stav. Pozadí se vykresluje pod rámečkem, paddingem i obsahem prvku. |
| padding-box | pozadí se vykresluje jen pod paddingem a obsahem prvku |
| content-box | pozadí se vykreslí pouze v obdélníku, který obsahuje vlastní obsah prvku |
| text | pozadí se má vykreslovat pouze pod vlastním textem prvku |
| inherit, initial, unset | resetovací hodnoty pro účely skriptů, odpovídají hodnotě border-box |
Background-clip tedy dovoluje "uříznout" pozadí, které je pod paddigem nebo rámečkem. Ostatně "clip" znamená "oříznutí". Dříve taková věc šla udělat jenom matrjoškou (zanořením do dalšího prvku s jiným pozadím).
Silný bude background-clip se dvěma věcmi:
- nastavení více různých pozadí (multiple background), každé z nich s jiným background-clip
- až bude fungovat hodnota text, která nyní podporována není (únor 2021).
Příklady
Test background-clip a background-origin
Podpora
| Prohlížeč | Podpora ve verzích | Podpora hodnoty text |
|---|---|---|
| Internet Explorer | od verze 9 s prefixem -ms- | ne |
| Firefox | všechny verze | ne |
| Chrome, Safari, Opera, Edge | všechny verze s prefixem -webkit- | ne |
Pozor, ještě v roce 2021 je nutno pro správnou funkci vlastnosti background-clip zapisovat vlastnost dvakrát. Jednou normálně bez prefixu a jednou s prefixem -webkit-. Protože prefixy bytostně nesnáším, doporučuji funkčnost používat zatím jenom pro Firefox.
Poslední aktualizace 15. 2. 2021
Reklama
