CSS skygger

Med CSS masker kan du oprette et maskeringslag og placere det på et element for at skjule nogle dele af elementet delvist eller fuldstændigt.

mask-image egenskab

CSS mask-image egenskab specificerer maskeringslagets billede.

Maskeringsbilledet kan være PNG-billede, SVG-billede,CSS Farveovergang eller SVG <mask> element.

Browserunderstøttelse

Tallet i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

med -webkit- Tallet foran præfikset angiver den første version, der understøtter dette præfix.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 15 -webkit-

Brug af billeder som maskeringslag

For at bruge PNG- eller SVG-billeder som maskeringslag, brug url() Værdi overførsel af maskeringslagets billede.

Maskeringsbilledet skal have transparente eller halvt transparente områder. Sort betyder fuldstændig transparent.

Dette er det maskeringsbillede (PNG-billede), vi vil bruge:

W3

Dette er billedet fra italiensk Cinque Terre:

Wuhan

Nu, vil vi anvende maskeringsbilledet (det øverste PNG-billede) som en maskeringslag over italiensk Cinque Terre-billedet:

Wuhan

Eksempel

Her er kildekoden:

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

Prøv selv

eksempler på forklaring

mask-image egenskaben specificerer billedet, der bruges som elementets maskeringslag.

mask-repeat egenskaben specificerer, om maskeringsbilledet skal gentages eller hvordan det skal gentages. Værdien no-repeat betyder, at maskeringsbilledet ikke gentages (maskeringsbilledet vises kun én gang).

en anden eksempel

hvis vi undlader mask-repeat egenskaben, hvor maskeringsbilledet gentages over hele billedet Wuyuan-citadelen:

Wuhan

Eksempel

Her er kildekoden:

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

Prøv selv

brug af gradient som maskeringslag

CSS lineære og radiale grader kan også bruges som maskeringsbilleder.

eksempel på lineær gradient

Her bruger vi lineær gradient som billedets maskeringslag. Denne lineære gradient går fra top (sort) til bund (gennemsigtig):

Wuhan

Eksempel

brug af lineær gradient som maskeringslag:

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

Prøv selv

Her bruger vi lineær gradient og tekstmaske som billedets maskeringslag:

Wuhan er en vigtig udviklingsplads for Chu-kulturen og har siden de tre kongedømmer og de fem riger været en vigtig militær og kommerciel by i det sydlige Kina. I Yuan-dynastiet blev det hovedstad i Huguang-provinsen og blev i Ming og Qing dynastierne omtalt som 'det første blomstrende sted i Chu' og en af 'de fire største samlinger i verden'. I slutningen af Qing-dynastiet åbnede Hankou og den vestlige kulturelle bevægelse indledte Wuhans moderne udviklingsproces, hvilket gjorde det til en vigtig økonomisk center i det moderne Kina. Wuhan er stedet for den første opstand i Xinhai-revolutionen og har flere gange været det nationale politiske, militære og kulturelle center i moderne historie.

Wuhan er en vigtig udviklingsplads for Chu-kulturen og har siden de tre kongedømmer og de fem riger været en vigtig militær og kommerciel by i det sydlige Kina. I Yuan-dynastiet blev det hovedstad i Huguang-provinsen og blev i Ming og Qing dynastierne omtalt som 'det første blomstrende sted i Chu' og en af 'de fire største samlinger i verden'. I slutningen af Qing-dynastiet åbnede Hankou og den vestlige kulturelle bevægelse indledte Wuhans moderne udviklingsproces, hvilket gjorde det til en vigtig økonomisk center i det moderne Kina. Wuhan er stedet for den første opstand i Xinhai-revolutionen og har flere gange været det nationale politiske, militære og kulturelle center i moderne historie.

Wuhan er en vigtig udviklingsplads for Chu-kulturen og har siden de tre kongedømmer og de fem riger været en vigtig militær og kommerciel by i det sydlige Kina. I Yuan-dynastiet blev det hovedstad i Huguang-provinsen og blev i Ming og Qing dynastierne omtalt som 'det første blomstrende sted i Chu' og en af 'de fire største samlinger i verden'. I slutningen af Qing-dynastiet åbnede Hankou og den vestlige kulturelle bevægelse indledte Wuhans moderne udviklingsproces, hvilket gjorde det til en vigtig økonomisk center i det moderne Kina. Wuhan er stedet for den første opstand i Xinhai-revolutionen og har flere gange været det nationale politiske, militære og kulturelle center i moderne historie.

Eksempel

brug af lineær gradient og tekstmaske som maskeringslag:

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

Prøv selv

eksempel på radial gradient

Her bruger vi radial gradient (form som cirkel) som billedets maskeringslag:

Wuhan

Eksempel

brug af radial gradient som maskeringslag (cirkulær):

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

Prøv selv

Her bruger vi en radial gradient (formet som ellipse) som dekkelag for billedet:

Wuhan

Eksempel

Brug en anden radial gradient som dekkelag (ellipse):

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

Prøv selv

Brug af SVG som dekkelag

SVG <mask>-elementet kan bruges inde i SVG-grafikker til at oprette dekkelagseffekter.

Her bruger vi SVG <mask>-elementet til at oprette forskellige dekkelag for billeder:

Eksempel

Beklager, din browser understøtter ikke inline SVG.

En SVG-dekkelag (formet som trekant):

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

Prøv selv

Eksempel

Beklager, din browser understøtter ikke inline SVG.

En SVG-dekkelag (formet som stjerne):

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

Prøv selv

Eksempel

Beklager, din browser understøtter ikke inline SVG.

En SVG-dekkelag (formet som 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>

Prøv selv