CSS -maskering
Met CSS-maskering skep jy 'n maskerlaag om oor 'n element te plaas om gedeeltes van die element gedeeltelik of volledig te versteek.
Die CSS-maskerbeeld-eiendom
Die CSS mask-image
-eienskap spesifiseer 'n maskerlaagbeeld.
Die maskerlaagprent kan 'n PNG-prent, 'n SVG-prent, 'n CSS-gradiënt of 'n SVG <mask>-element wees .
Blaaierondersteuning
Let wel: Die meeste blaaiers het slegs gedeeltelike ondersteuning vir CSS-maskering. Jy sal die -webkit- voorvoegsel bykomend tot die standaard eiendom in die meeste blaaiers moet gebruik.
Die nommers in die tabel hieronder spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun. Nommers gevolg deur -webkit- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
Property | |||||
---|---|---|---|---|---|
mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Gebruik 'n prent as die maskerlaag
Om 'n PNG- of 'n SVG-beeld as die maskerlaag te gebruik, gebruik 'n url() waarde om in die maskerlaagprent deur te gee.
Die maskerbeeld moet 'n deursigtige of semi-deursigtige area hê. Swart dui heeltemal deursigtig aan.
Hier is die maskerbeeld ('n PNG-prent) wat ons sal gebruik:
Hier is 'n beeld van Cinque Terre, in Italië:
Nou pas ons die maskerbeeld (die PNG-prent hierbo) toe as die maskerlaag vir die beeld van Cinque Terre, Italië:
Voorbeeld
Hier is die bronkode:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Voorbeeld Verduidelik
Die mask-image
eienskap spesifiseer die beeld wat as 'n maskerlaag vir 'n element gebruik moet word.
Die mask-repeat
eiendom spesifiseer of of hoe 'n maskerbeeld herhaal sal word. Die no-repeat
waarde dui aan dat die maskerbeeld nie herhaal sal word nie (die maskerbeeld sal net een keer gewys word).
Nog 'n voorbeeld
As ons die eiendom weglaat mask-repeat
, sal die maskerbeeld oor die hele beeld van Cinque Terre, Italië herhaal word:
Voorbeeld
Hier is die bronkode:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
Gebruik gradiënte as die maskerlaag
CSS lineêre en radiale gradiënte kan ook as maskerbeelde gebruik word.
Lineêre Gradiënt Voorbeelde
Hier gebruik ons 'n lineêre gradiënt as die maskerlaag vir ons beeld. Hierdie lineêre gradiënt gaan van bo (swart) na onder (deursigtig):
Voorbeeld
Gebruik 'n lineêre gradiënt as 'n maskerlaag:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
Hier gebruik ons 'n lineêre gradiënt saam met teksmaskering as die maskerlaag vir ons beeld:
Die Cinque Terre is 'n kusgebied binne Ligurië, in die noordweste van Italië. Dit lê in die weste van die La Spezia-provinsie en bestaan uit vyf dorpies: Monterosso al Mare, Vernazza, Corniglia, Manarola en Riomaggiore.
Die Cinque Terre is 'n kusgebied binne Ligurië, in die noordweste van Italië. Dit lê in die weste van die La Spezia-provinsie en bestaan uit vyf dorpies: Monterosso al Mare, Vernazza, Corniglia, Manarola en Riomaggiore.
Die Cinque Terre is 'n kusgebied binne Ligurië, in die noordweste van Italië. Dit lê in die weste van die La Spezia-provinsie en bestaan uit vyf dorpies: Monterosso al Mare, Vernazza, Corniglia, Manarola en Riomaggiore.
Voorbeeld
Gebruik 'n lineêre gradiënt saam met teksmaskering as 'n maskerlaag:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
Radiale Gradiënt Voorbeelde
Hier gebruik ons 'n radiale gradiënt (gevorm as 'n sirkel) as die maskerlaag vir ons beeld:
Voorbeeld
Gebruik 'n radiale gradiënt as 'n maskerlaag ('n sirkel):
.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%);
}
Hier gebruik ons 'n radiale gradiënt (gevorm as 'n ellips) as die maskerlaag vir ons beeld:
Voorbeeld
Gebruik nog 'n radiale gradiënt as 'n maskerlaag ('n ellips):
.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));
}
Gebruik SVG as die maskerlaag
Die SVG- <mask>
element kan binne 'n SVG-grafika gebruik word om maskeringseffekte te skep.
Hier gebruik ons die SVG <mask>
-element om verskillende maskerlae vir ons beeld te skep:
Voorbeeld
'n SVG-maskerlaag (gevorm as 'n 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="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
Voorbeeld
'n SVG-maskerlaag (gevorm as 'n 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="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
Voorbeeld
'n SVG-maskerlaag (gevorm as sirkels):
<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="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
CSS-maskeringseienskappe
Die volgende tabel lys al die CSS-maskeringseienskappe:
Property | Description |
---|---|
mask-image | Specifies an image to be used as a mask layer for an element |
mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
mask-repeat | Specifies how the mask layer image is repeated |
mask-size | Specifies the size of a mask layer image |