CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure CSS agtergronde CSS-grense CSS-marges CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting CSS teks CSS lettertipes CSS-ikone CSS skakels CSS-lyste CSS-tabelle CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte CSS Shadows CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

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:

W3Schools.com

Hier is 'n beeld van Cinque Terre, in Italië:

Vyf lande

Nou pas ons die maskerbeeld (die PNG-prent hierbo) toe as die maskerlaag vir die beeld van Cinque Terre, Italië:

Vyf lande

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-imageeienskap spesifiseer die beeld wat as 'n maskerlaag vir 'n element gebruik moet word.

Die mask-repeateiendom 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:

Vyf lande

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

Vyf lande
 

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:

Vyf lande

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:

Vyf lande

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:

Sorry, your browser does not support inline SVG.

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>
Sorry, your browser does not support inline 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>
Sorry, your browser does not support inline 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