CSS maskering

Met CSS maskering kunt u een maskerlaag maken en deze plaatsen op een element om bepaalde delen van het element gedeeltelijk of volledig te verbergen.

mask-image eigenschap

CSS mask-image De eigenschap specificeert het maskerlaagbeeld.

Het maskerbeeld kan een PNG-afbeelding, SVG-afbeelding, zijn.CSS Verloop of SVG <mask> element.

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.

met -webkit- De cijfers voor de prefix betekenen de eerste versie die de prefix ondersteunt.

Gebruik een afbeelding als maskerlaag

Om een PNG- of SVG-afbeelding als maskerlaag te gebruiken, gebruik dan url() Waarde doorgeven aan maskerlaagbeeld.

Het maskerbeeld moet een transparente of semi-transparente gebied hebben. Zwart betekent volledig transparent.

Dit is het maskerbeeld (PNG-afbeelding) dat we zullen gebruiken:

Dit is het beeld van de vijf dorpen in Italië:

Nu, we gaan het maskerbeeld (bovenstaande PNG-afbeelding) toepassen als een maskerlaag op het beeld van de vijf dorpen in Italië:

Voorbeeld

Hieronder is de broncode:

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

Probeer het zelf

Voorbeelden verklaren

mask-image eigenschap specifies de afbeelding die wordt gebruikt als element masker.

mask-repeat eigenschap specifies of de masker afbeelding wordt herhaald of hoe het wordt herhaald. De waarde no-repeat betekent dat de masker afbeelding niet wordt herhaald (de masker afbeelding wordt alleen een keer weergegeven).

een andere voorbeeld

Als we mask-repeat De eigenschap, als de masker afbeelding wordt herhaald weergegeven over het hele beeld van Wuyuan:

Voorbeeld

Hieronder is de broncode:

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

Probeer het zelf

Gebruik een verloop als masker

CSS lineaire en radiale verlopen kunnen ook worden gebruikt als masker afbeeldingen.

Voorbeeld van lineair verloop

Hier gebruiken we een lineair verloop als masker voor het beeld. Deze lineaire verloop gaat van boven (zwart) naar beneden (transparant):

Voorbeeld

Gebruik een lineair verloop als masker:

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

Probeer het zelf

Hier gebruiken we een lineair verloop en tekstmasker als masker voor het beeld:

Voorbeeld

Gebruik een lineair verloop en tekstmasker als masker:

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

Probeer het zelf

Voorbeeld van radiaal verloop

Hier gebruiken we een radiaal verloop (vorm cirkel) als masker voor het beeld:

Voorbeeld

Gebruik een radiaal verloop als masker (cirkel):

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

Probeer het zelf

Hier gebruiken we een radiaalverlopende gradient (vorm: ovaal) als maskerlaag voor de afbeelding:

Voorbeeld

Gebruik een andere radiaalverlopende gradient als maskerlaag (ovale):

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

Probeer het zelf

Gebruik van SVG als maskerlaag

Het SVG <mask> element kan binnenin SVG-grafieken worden gebruikt om maskereffecten te creëren.

Hier gebruiken we het SVG <mask> element om verschillende maskerlagen voor afbeeldingen te maken:

Voorbeeld

Een SVG maskerlaag (vorm: driehoek):

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

Probeer het zelf

Voorbeeld

Een SVG maskerlaag (vorm: ster):

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

Probeer het zelf

Voorbeeld

Een SVG maskerlaag (vorm: cirkel):

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

Probeer het zelf