CSS peittimet

CSS-sivuston avulla voit luoda peittokuvan ja sijoittaa sen elementin päälle, jotta voit osittain tai täysin peittää elementin tiettyjä osia.

mask-image -ominaisuus

CSS mask-image ominaisuus määrittää peittokuvan kuvan.

Peittokuvana voi olla PNG-kuvia, SVG-kuvia,CSS väriäisyys tai SVG <mask> -elementti.

Selaimen tuki

Alapuolella olevat numerot ilmaisevat ensimmäisen version, joka tukee täysin kyseistä ominaisuutta.

Vedetään -webkit- Etuliitteiden numerot ilmaisevat ensimmäisen version, joka tukee kyseistä etuliitettä.

Käytä kuvaa peittokerroksena

Jos haluat käyttää PNG- tai SVG-kuvaa peittokerroksena, käytä url() Arvo siirretään peittokerroksen kuvaksi.

Peittokuvalla tulee olla läpinäkyviä tai puoliläpinäkyviä alueita. Musta edustaa täysin läpinäkyvää.

Tämä on peittokuvamme, jonka käytämme (PNG-kuvana):

Tämä on Italian viiden kalastajan kylän kuva:

Nyt sovellamme peittokuvaa (ylittävän PNG-kuvan) Italian viiden kalastajan kylän kuvan peittokerroksena:

Esimerkki

Seuraavassa on lähdekoodi:

.mask1 {
  -webkit-mask-image: url(w3.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

Kokeile itse

esimerkki selityksellä

mask-image ominaisuus määrittää kuvan, joka käytetään elementin peittokuvana.

mask-repeat ominaisuus määrittää, toistetaanko peittokuvakuva tai miten se toistetaan. no-repeat -arvo tarkoittaa, että peittokuvakuva ei toistu (peittokuvakuva näytetään vain kerran).

toinen esimerkki

jos jätämme mask-repeat ominaisuus, peittokuvakuva toistetaan koko Wuyuan-kuvan yllä:

Esimerkki

Seuraavassa on lähdekoodi:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

Kokeile itse

käytetään peittokuvaa säteistä:

CSS lineaariset ja säteiset peittokuvat voidaan käyttää peittokuvakuvina.

Lineaarisen peittokuvan esimerkki

Tässä käytämme lineaarista peittokuvaa kuvan peittokuvana. Tämä lineaarinen peittokuvaa alkaa ylhäältä (musta) alapuolelle (läpinäkyvä):

Esimerkki

käytetään lineaarista peittokuvaa peittokuvana:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

Kokeile itse

Tässä käytämme lineaarista peittokuvaa ja tekstitä kuvan peittokuvana:

Esimerkki

käytetään lineaarista peittokuvaa ja tekstitä peittokuvana:

.mask1 {
  max-leveys: 600px;
  korkeus: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

Kokeile itse

Säteinen peittokuvan esimerkki

Tässä käytämme säteistä peittokuvaa (muoto pyöreä) kuvan peittokuvana:

Esimerkki

käytetään säteistä peittokuvaa peittokuvana (pyöreä):

.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Kokeile itse

Tässä käytämme säteiskiiltoa (muoto on pyöreä) kuvan peitteeksi:

Esimerkki

Käytetään toista säteiskiiltopeitettä (pyöreä):

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Kokeile itse

SVG:n käyttö peitteinä

SVG <mask>-elementtiä voidaan käyttää SVG-grafiikassa luodakseen peitteitä.

Tässä käytämme SVG <mask>-elementtiä luodaksemme erilaisia peitteitä kuville:

Esimerkki

Yksi SVG-siirtopeite (muoto on kolmiokulmainen):

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

Kokeile itse

Esimerkki

Yksi SVG-siirtopeite (muoto on tähti):

<svg width="600" height="400">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

Kokeile itse

Esimerkki

Yksi SVG-siirtopeite (muoto on pyöreä):

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

Kokeile itse