CSS mask-image egenskab

Forrige side mask-composite
Næste side mask-mode

Definition og brug

mask-image Egenskaben bruges til at specificere billedet, der bruges som elementets maske.

Tip:CSS' lineære og radiale glidninger kan også bruges som masker.

Eksempel

Eksempel 1

Opret maske for billeder:

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

Prøv det selv

Eksempel 2

Brug af lineære og radiale glidninger til at oprette forskellige masker for billeder:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
.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%);
}
.mask3 {
  -webkit-mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5));
}

Prøv det selv

Eksempel 3

Brug SVG <mask>-elementet til at oprette et maskeringslag for billeder:

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

Prøv det selv

Eksempel 4

Brug SVG <mask>-elementet til at oprette en anden maskeringslag for billeder:

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

Prøv det selv

CSS syntaks

mask-image: none|image|url()|initial|inherit;

Egenskabsværdi

Værdi	Beskrivelse
none	Standardværdi. Brug ikke maskeringsbillede.
image	Bruges som maskeringsbillede.
url()	URL-referencer til billeder eller SVG <mask>-elementer.
initial	Sæt denne egenskab til dens standardværdi. Se: initial.
inherit	Arver denne egenskab fra sin forældrelement. Se: inherit.

Tekniske detaljer

Standardværdi:	none
Arv:	Nej
Animation fremstilling:	Ikke understøttet. Se:Animation relaterede egenskaber.
Version:	CSS Masking Module Level 1
JavaScript syntaks:	object.style.maskImage="url(star.svg)"