CSS masks

Med hjälp av CSS-skugg kan du skapa ett skugglägg och placera det på ett element för att dölja vissa delar av elementet, delvis eller helt.

mask-image egenskap

CSS mask-image egenskapen specificerar skuggläggsbilden.

Skuggläggsbilden kan vara en PNG-bild, en SVG-bild,CSS Gradienter eller SVG <mask> element.

Webbläsarstöd

Talen i tabellen representerar den första webbläsarens version som helt stöder egenskapen.

med -webkit- Antalet före prefixet indikerar den första versionen som stöder detta prefix.

Använd bild som skugglägg

För att använda PNG- eller SVG-bilder som skugglägg, använd: url() Värdet överförs till skuggläggsbilden.

Skuggbildsytan behöver ha genomskinliga eller halvgjennomsiktiga områden. Svart betyder helt genomskinligt.

Detta är den skuggbild som vi kommer att använda (PNG-bild):

Detta är bilden från de fem fiskbyarna i Italien:

Nu kommer vi att tillämpa skuggbildsytan (ovanstående PNG-bild) som ett skugglägg på bilden av de fem fiskbyarna i Italien:

Exempel

Nedan är källkoden:

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

Try it yourself

exempel förklaring

mask-image egenskapen specificerar vilken bild som används som elementets skyddande lager.

mask-repeat egenskapen specificerar om skyddande bild kommer att upprepas eller hur den kommer att upprepas. no-repeat-värdet innebär att skyddande bild inte kommer att upprepas (skyddande bild kommer att visas endast en gång).

en annan instans

Om vi utelämnar mask-repeat Egenskapen, skyddande bild kommer att upprepas över hela femfisken bilden:

Exempel

Nedan är källkoden:

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

Try it yourself

Använd gradient som skyddande lager

CSS linjär och radialgradient kan också användas som skyddande bild.

Linjärgradientexempel

Här använder vi linjärgradient som skyddande lager för bilden. Denna linjärgradient går från toppen (svart) till botten (genomskinlig):

Exempel

Använd linjärgradient som skyddande lager:

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

Try it yourself

Här använder vi linjärgradient och textskydd som skyddande lager för bilden:

Exempel

Använd linjärgradient och textskydd som skyddande lager:

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

Try it yourself

Radialgradientexempel

Här använder vi radialgradient (formad som cirkel) som skyddande lager för bilden:

Exempel

Använd radialgradient som skyddande lager (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%);
}

Try it yourself

Här använder vi en radialgradient (formad som ellipse) som skygga för bilden:

Exempel

Använd en annan radialgradient som skygga (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%);
}

Try it yourself

Använd SVG som skygga

SVG <mask>-element kan användas inom SVG-grafik för att skapa skyggeffekter.

Här använder vi SVG <mask>-elementet för att skapa olika skyggor för bilder:

Exempel

En SVG-skygga (formad som triangel):

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

Try it yourself

Exempel

En SVG-skygga (formad som stjärna):

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

Try it yourself

Exempel

En SVG-skygga (formad 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>

Try it yourself