Egenskapen mask-image

Egenskapen mask-image låter dig ange en bild som ska användas som mask för ett element. Masken bestämmer vilka delar av elementet som kommer att vara synliga och vilka som kommer att döljas. Som mask kan du använda SVG, PNG-bilder eller gradienter.

Syntax

cssselektor {
  mask-image: none | <image> | <url>;
}

Värden

Exempel . Använda SVG som mask

Låt oss applicera en SVG-bild av ett hjärta som mask på en bild:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 300px;
  mask-repeat: no-repeat;
}

Результат:

Exempel . Använda en gradient som mask

Låt oss applicera en linjär gradient som mask för ett element:

html<div id="elem"></div>

css#elem {
  width: 500px;
  height: 300px;
  background: linear-gradient(45deg, red, blue);
  mask-image: linear-gradient(to right, transparent, black);
}

Результат:

Exempel . Använda ett SVG-element som mask

Låt oss skapa en mask med hjälp av ett SVG-element och applicera den på en bild:

html<img id="image" src="image.jpg">
<svg width="0" height="0">
  <mask id="mask">
    <path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
  </mask>
</svg>

css#image {
  width: 500px;
  height: 281px;
  mask-image: url(#mask);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

Результат:

Se även