kurstablet

CSS referens手册

CSS egenskap

Valfria kurser

Kursrekommendation:

CodeW3C.coms kista

CSS mask egenskap

Föregående sida marker-start
Nästa sida mask-clip

Definition och användning

mask Egenskapen används för att dölja element genom att använda skugga eller klippa bilden (delvis eller helt).

mask Egenskapen är en förkortning av följande egenskaper:

Exempel

Exempel 1

Skapa en skugga för en bild:

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

Prova själv

Exempel 2

Skapa olika skuggor för en bild med linjär och radial toning:

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

Prova själv

Exempel 3

Använd SVG <mask>-elementet för att skapa en skugga för en bild:

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

Prova själv

Exempel 4

Använd SVG <mask>-elementet för att skapa en skugga för en bild:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
mask-image	Specificera bilden som används som elementets masklagr. Standardvärdet är none.
mask-mode	Specificera om masklagrets bild ska ses som en ljusmask eller en alpha-mask. Standardvärdet är match-source.
mask-repeat	Ställ in om maskbilden ska upprepas och hur. Standardvärdet är repeat.
mask-position	Ställ in bildens startposition för masklagret (relativt till maskeringspositionsområdet). Standardvärdet är 0% 0%.
mask-clip	Specificera det område som påverkas av maskbilden. Standardvärdet är border-box.
mask-origin	Specificera bildens startposition för masklagret (maskeringspositionsområdet). Standardvärdet är border-box.
mask-size	Specificera storleken på masklagrets bild. Standardvärdet är auto.
mask-composite	Specificera den syntetiska operationen som används mellan nuvarande och nedanstående masklager. Standardvärdet är add.
initial	Sätt denna egenskap till dess standardvärde. Se också: initial.
inherit	Arver egenskapen från föräldrelementet. Se också: inherit.

Tekniska detaljer

Standardvärde:	none match-source repeat 0% 0% border-box border-box auto add
Arv:	Nej
Animeringsproduktion:	Stöds inte. Se också:Animeringsrelaterade egenskaper.
Version:	CSS Masking Module Level 1
JavaScript-syntax:	object.style.mask="url(star.svg)"