Klip na pozadí - Triky CSS

Anonim

background-clip umožňuje ovládať, ako ďaleko presahuje obrázok alebo farba pozadia výplň alebo obsah prvku.

.frame ( background-clip: padding-box; )

Hodnoty

  • border-boxje predvolená hodnota. Toto umožňuje pozadiu, aby sa rozšírilo až k vonkajšiemu okraju hranice prvku.
  • padding-box prichytí pozadie na vonkajšom okraji výplne prvku a nenechá ho presahovať do okraja.
  • content-boxsponky na pozadí na okraji poľa s obsahom.
  • inheritpoužije background-clipnastavenie rodiča na vybraný prvok.

Ukážky

background-clip sa najlepšie vysvetľuje v praxi, preto sme zostavili dve ukážky, ktoré ukazujú, ako to funguje.

V prvej ukážke má každá časť divu jeden odsek. Tento odsek je obsahom prvku div. Každá div má žlté pozadie a 5-pixelový polopriehľadný svetlo modrý okraj.

Pozrite si klip na pozadí pera od CSS-Tricks (@ css-tricks) na CodePen.

Štandardne alebo s background-clip: border-boxnastaveným nastavením žlté pozadie siaha až k vonkajšiemu okraju hranice. Všimnite si, ako vyzerá orámovanie na zeleno kvôli žltému pozadiu pod ním.

Keď background-clipsa zmení na padding-box, farba pozadia sa zastaví tam, kde končí výplň prvku. Všimnite si, že okraj je modrý, pretože pozadie nesmie krvácať do okraja.

S background-clip: content-box, farba pozadia sa použije iba na obsah div, v tomto prípade na jeden odsek. Polstrovanie a orámovanie div nemajú farbu pozadia. Za zmienku však stojí jeden malý detail: farba siaha až po okraj obsahu. Pozrite sa na rozdiely medzi prvým a druhým príkladom pomocou content-box.

V prvom content-boxpríklade sa na odsek použijú predvolené okraje prehliadača a klipy na pozadí za okrajom. V druhom príklade je okraj v CSS nastavený na 0 a pozadie je orezané na okraji textu.

Táto ďalšia interaktívna show background-clips obrázkom na pozadí. Obsah v tejto ukážke je menší prázdny diel.

Pozrite si interaktívny príklad pera a klipu na pero od Timothy Millera (@tjacobdesign) na stránkach CodePen.

Táto ukážka platí tiež background-size: covera background-repeat: no-repeatokrem background-clipkontroly obrázka na pozadí, ktorý by sa inak opakoval až do orezania.

Text

K dispozícii je verzia s predponou dodávateľa, ktorá funguje na orezanie pozadia na text. Aby bolo možné túto prácu vidieť, bude potrebné, aby bol text transparentný. Našťastie existuje iná vlastnosť farby textu s predponou dodávateľa, ktorá môže efektívne prepísať color, takže je bezpečné ju používať, pretože môže mať záložné riešenie:

.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )

Firefox, Chrome a Safari to podporujú.

Prečítajte si
text Pen Lit Chrisa Coyiera (@chriscoyier)
na stránke CodePen.

Súvisiace

  • príloha na pozadí
  • farba pozadia
  • obrázok na pozadí
  • pôvod pozadia
  • Pozícia na pozadí
  • opakovanie pozadia
  • veľkosť pozadia

Ďalšie zdroje

  • background-clip v CSS3 spec
  • klip na pozadí na MDN
  • Model CSS Box

Podpora prehľadávača

Všetko jasné!

Chrome Safari Firefox Opera IE Android iOS
1+ 3+ 4+ 10,5+ 9+ 4,1+ Tvorba