Klip na pozadí - Triky CSS

Anonim

background-clip umožňuje určit, jak daleko obrázek nebo barva pozadí přesahuje výplň nebo obsah prvku.

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

Hodnoty

  • border-boxje výchozí hodnota. To umožňuje pozadí rozšířit až k vnějšímu okraji hranice prvku.
  • padding-box klipy pozadí na vnějším okraji výplně prvku a nedovolí, aby se rozšířilo do ohraničení.
  • content-boxklipy pozadí na okraji pole s obsahem.
  • inheritaplikuje background-clipnastavení rodiče na vybraný prvek.

Ukázky

background-clip je nejlépe vysvětlit v akci, proto jsme sestavili dvě ukázky, které ukazují, jak to funguje.

V první ukázce má každý div jeden odstavec. Odstavec je obsahem div. Každá div má žluté pozadí a polopropustný světle modrý okraj 5 pixelů.

Podívejte se na klip na pozadí Pen od CSS-Tricks (@ css-tricks) na CodePen.

Ve výchozím nastavení nebo se background-clip: border-boxsadou se žluté pozadí rozšiřuje až k vnějšímu okraji ohraničení. Všimněte si, jak ohraničení vypadá, že je zelené kvůli žlutému pozadí pod ním.

Když background-clipse změní na padding-box, barva pozadí se zastaví tam, kde končí výplň prvku. Všimněte si, že ohraničení je modré, protože pozadí nesmí krvácet do ohraničení.

S background-clip: content-boxbarvou pozadí se použije pouze na obsah div, v tomto případě na jeden odstavec. Polstrování a ohraničení div nemají barvu pozadí. Je ale třeba zmínit jeden malý detail: barva sahá až k okraji obsahu. Podívejte se na rozdíly mezi prvním a druhým příkladem pomocí content-box.

V prvním content-boxpříkladu se výchozí okraje prohlížeče použijí na odstavec a klipy na pozadí za okrajem. Ve druhém příkladu je okraj v CSS nastaven na 0 a pozadí je oříznuto na okraji textu.

Tato další interaktivní show background-clips obrázkem na pozadí. Obsahem této ukázky je menší prázdný div.

Podívejte se na interaktivní příklad Pen-clip-clip od Timothy Millera (@tjacobdesign) na CodePen.

Toto demo také platí background-size: covera background-repeat: no-repeatnavíc k background-clipovládání obrázku na pozadí, který by se jinak opakoval až do oříznutí.

Text

K dispozici je verze s předponou dodavatele, která funguje pro ořezávání pozadí na text. Aby bylo možné tuto práci vidět, bude také nutné, aby byl text transparentní. Naštěstí existuje další vlastnost barvy textu s předponou dodavatele, která může účinně přepsat color, takže je bezpečné ji používat, protože může mít záložní řešení:

.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í.

Podívejte se na
text Pen Lit Chrisa Coyiera (@chriscoyier)
na CodePen.

Příbuzný

  • příloha na pozadí
  • barva pozadí
  • obrázek na pozadí
  • původ pozadí
  • pozice na pozadí
  • opakování pozadí
  • velikost pozadí

Další zdroje

  • background-clip ve specifikaci CSS3
  • background-clip ve společnosti MDN
  • Model CSS Box

Podpora prohlížeče

Vše jasné!

Chrome Safari Firefox Opera TJ Android iOS
1+ 3+ 4+ 10,5+ 9+ 4.1+ Funguje