kurssisuunnitelma

CSS viittausopas

CSS-ominaisuus

Valinnainen kurssi

Kurssivihjeet:

CodeW3C.com arvokasta aarteita

CSS mask ominaisuus

Edellinen sivu marker-start
Seuraava sivu mask-clip

Määrittely ja käyttö

mask Ominaisuus käytetään elementin peittämiseen tai leikkaamiseen peittokerroksen tai leikkausvihkon avulla (osittain tai kokonaan).

mask Ominaisuus on seuraavien ominaisuuksien lyhennysmuoto:

Esimerkki

Esimerkki 1

Luo kuvan peittokerros:

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

Kokeile itse

Esimerkki 2

Luo kuvan peittokerroksia eri linjausten ja säteiden avulla:

.mask1 {
  mask: linear-gradient(black, transparent);
}
.mask2 {
  mask: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  mask: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Kokeile itse

Esimerkki 3

Luo SVG <mask>-elementin avulla kuvan peittokerros:

<svg width="600" height="400">
  <mask id="svgmask1">
    <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="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Kokeile itse

Esimerkki 4

Luo SVG <mask>-elementin avulla kuvan peittokerros:

<svg width="600" height="400">
  <mask id="svgmask1">
    <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="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Kokeile itse

CSS-kieli

mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

Ominaisuuden arvo

Arvo	Kuvaus
mask-image	Määritä käytettäväksi elementin peittävänä kerroksena oleva kuva. Oletusarvo on none.
mask-mode	Määritä, pitäisikö peittävän kerroksen kuvaa nähdä valaistuspeittävänä vai alfa-peittävänä. Oletusarvo on match-source.
mask-repeat	Aseta peittävän kuvan toistotapa. Oletusarvo on repeat.
mask-position	Aseta peittävän kuvan alkuperäinen sijainti (suhteessa peittävän sijainnin alueeseen). Oletusarvo on 0% 0%.
mask-clip	Määritä peittävän kuvan vaikutusalue. Oletusarvo on border-box.
mask-origin	Määritä peittävän kerroksen kuvan alkuperäinen sijainti (peittävän sijainnin alue). Oletusarvo on border-box.
mask-size	Määritä peittävän kerroksen kuvan koko. Oletusarvo on auto.
mask-composite	Määritä nykyisen peittävän kerroksen ja alla olevan peittävän kerroksen käyttämä yhdistys operaatio. Oletusarvo on add.
initial	Aseta tämä ominaisuus sen oletusarvoon. Katso: initial.
inherit	Perii tämän ominaisuuden vanhemmalta elementiltä. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo:	none match-source repeat 0% 0% border-box border-box auto add
Perintä:	Ei
Animaation tekeminen:	Ei tuettu. Katso:Animaatioon liittyvät ominaisuudet.
Versio:	CSS Masking Module Level 1
JavaScript-kieli:	object.style.mask="url(star.svg)"