Taustaleike - CSS-temppuja

Anonim

background-clip voit hallita, kuinka pitkälle taustakuva tai väri ulottuu elementin täytteen tai sisällön ulkopuolelle.

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

Arvot

  • border-boxon oletusarvo. Tämän ansiosta tausta voi ulottua aina elementin reunan ulkoreunaan saakka.
  • padding-box leikkaa taustan elementin ulkoreunan ulkoreunasta eikä anna sen ulottua reunaan.
  • content-boxleikkaa taustan sisältöruudun reunaan.
  • inheritkäyttää background-clipylätason asetusta valittuun elementtiin.

Demot

background-clip on parhaiten selitettävissä toiminnassa, joten olemme koonneet kaksi demoa osoittamaan, miten se toimii.

Ensimmäisessä esittelyssä jokaisella div: lla on yksi kappale sisällä. Kappale on div: n sisältö. Jokaisella divilla on keltainen tausta ja 5 pikselin, osittain läpinäkyvä vaaleansininen reunus.

Katso CSS-Tricksin kynän taustaleike (@ css-tricks) CodePenistä.

background-clip: border-boxKeltainen tausta ulottuu oletusarvoisesti tai asetettuina aina reunan ulkoreunaan saakka. Huomaa, kuinka reuna näyttää vihreältä sen alla olevan keltaisen taustan takia.

Kun asetukseksi background-clipvaihdetaan padding-box, taustaväri pysähtyy kohtaan, jossa elementin pehmuste loppuu. Huomaa, että reunus on sininen, koska taustan ei saa vuotaa reunaan.

Kanssa background-clip: content-box, taustaväri koskee vain div: n sisältöä, tässä tapauksessa yhden kappaleen elementtiä. Div: n pehmusteella ja reunuksella ei ole taustaväriä. Mutta on yksi pieni mainitsemisen arvoinen yksityiskohta: väri ulottuu sisällön marginaaliin. Tarkista erot ensimmäisen ja toisen esimerkin välillä content-box.

Ensimmäisessä content-boxesimerkissä selaimen oletusmarginaalit lisätään kappaleeseen ja taustaleikkeet marginaalin jälkeen. Toisessa esimerkissä marginaali asetetaan 0: een CSS: ssä ja tausta leikataan tekstin reunaan.

Tämä seuraava interaktiivinen esitys background-cliptaustakuvalla. Tämän esittelyn sisältö on pienempi tyhjä div.

Katso Timothy Millerin (@tjacobdesign) vuorovaikutteinen kynän taustakuva CodePenistä.

Tämä demo pätee background-size: coverja background-repeat: no-repeatlisäksi background-clipvalvoa taustakuvan, joka muutoin toista kunnes leikkaamisen.

Teksti

Tästä on toimittajan etuliitteinen versio, joka toimii leikkaamalla tausta tekstiksi. Jotta tämä työ näkyisi, tekstin on myös oltava läpinäkyvä. Onneksi on olemassa toinen toimittajan etuliitetty tekstiväriominaisuus, joka voi tehokkaasti ohittaa color, mikä tekee siitä turvallisen käyttää, koska sillä voi olla varavara:

.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 ja Safari tukevat tätä.

Katso
Chris Coyierin (@chriscoyier) Pen Lit -teksti
CodePenistä.

Liittyvät

  • tausta-kiinnitys
  • taustaväri
  • taustakuva
  • tausta-alkuperä
  • taustan sijainti
  • tausta-toisto
  • taustakoko

Lisää resursseja

  • background-clip CSS3-määrityksessä
  • taustaleike MDN: ssä
  • CSS-laatikkomalli

Selaimen tuki

Selvä!

Kromi Safari Firefox Ooppera IE Android iOS
1+ 3+ 4+ 10,5+ 9+ 4.1+ Toimii