Háttér-klip - CSS-trükkök

Anonim

background-clip segítségével szabályozhatja, hogy egy háttérkép vagy szín milyen mértékben terjedjen ki az elem kitöltésén vagy tartalmán.

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

Értékek

  • border-boxaz alapértelmezett érték. Ez lehetővé teszi, hogy a háttér egészen az elem határának külső széléig nyúljon.
  • padding-box levágja a hátteret az elem párnázatának külső szélén, és nem hagyja, hogy kitolódjon a határba.
  • content-boxa hátteret a tartalomdoboz szélére vágja.
  • inheritbackground-clipa szülő beállítását alkalmazza a kiválasztott elemre.

Demók

background-clip a legjobban akcióban magyarázható, ezért két demót állítottunk össze, hogy bemutassuk a működését.

Az első bemutatóban minden div-nek van egy bekezdése. A bekezdés a div tartalma. Minden div sárga háttérrel és 5 pixeles, félig átlátszó világoskék szegéllyel rendelkezik.

Lásd a CSS-Tricks Toll háttérklipjét (@ css-tricks) a CodePen-en.

Alapértelmezés szerint vagy background-clip: border-boxhalmaz esetén a sárga háttér egészen a határ külső széléig terjed. Figyelje meg, hogy a szegély zöldnek tűnik az alatta lévő sárga háttér miatt.

Ha background-cliperre változik padding-box, a háttér színe ott áll le, ahol az elem kitöltése véget ér. Figyelje meg, hogy a szegély kék, mert a háttér nem engedi elvérezni a határt.

Ezzel background-clip: content-boxa háttérszín csak a div tartalmára vonatkozik, ebben az esetben az egyetlen bekezdés elemre. A div betétjének és szegélyének nincs háttérszíne. De van egy apró részlet, amelyet érdemes megemlíteni: a szín kiterjed a tartalom margójára. Ellenőrizze az első és a második példa közötti különbségeket a content-box.

Az első content-boxpéldában a böngésző alapértelmezett margóit alkalmazzák a bekezdésre, a háttér pedig a margó után. A második példában a margót 0-ra állítjuk a CSS-ben, és a hátteret a szöveg szélére vágjuk.

Ez a következő interaktív background-clipháttérkép látható. A bemutató tartalma egy kisebb üres div.

Lásd Timothy Miller (@tjacobdesign) toll háttérklip interaktív példáját a CodePen-en.

Ez a demó is vonatkozik background-size: cover, és background-repeat: no-repeatráadásul background-clip, hogy ellenőrizzék a háttérképet, amely egyébként addig ismételjük, amíg vágás.

Szöveg

Ennek van egy gyártója által előtagolt verziója, amely a háttér szöveggé történő kivágására szolgál. A munka megtekintéséhez a szövegnek is átlátszónak kell lennie. Szerencsére van egy másik szállító által előtagolt szöveg színtulajdonság, amely hatékonyan felülírhatja color, biztonságossá téve a használatát, mivel tartalék lehet:

.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; )

A Firefox, a Chrome és a Safari támogatja ezt.

Lásd
Chris Coyier (@chriscoyier)
tollal írt szövegét a CodePen-en.

Összefüggő

  • háttér-kötődés
  • háttérszín
  • háttérkép
  • háttér-eredet
  • háttér-helyzet
  • háttérismétlés
  • háttérméret

További források

  • background-clip a CSS3 specifikációjában
  • háttér-klip az MDN-nél
  • A CSS doboz modell

Böngésző támogatás

Minden tiszta!

Króm Szafari Firefox Opera AZAZ Android iOS
1+ 3+ 4+ 10,5+ 9+ 4.1+ Művek