Egenskapen mask

Egenskapen mask er en forkortelse for alle maskeringsegenskaper og lar deg angi: et bilde som maske, dens posisjon, størrelse, blandingsmodus og andre parametere.

Er en sammentrekkende egenskap for følgende egenskaper: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Syntaks

cssvelger {
  mask: [mask-image] [mask-position] / [mask-size]
        [mask-repeat] [mask-origin] [mask-clip]
        [mask-mode] [mask-composite];
}

Verdier

Forberedelse av bilder

La oss si at vi har et naturbilde som vi skal beskjære, og SVG-bilder av et hjerte og en pil, som vi skal klippe ut etter:

html<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

Результат:

Eksempel . Bilde-maske

La oss legge en hjerte-maske på bildet vårt:

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

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

Результат:

Eksempel . Maskens posisjon

Hjerte-masken i øvre venstre hjørne:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left top/150px no-repeat;
}

Результат:

Eksempel . Maskens posisjon

Hjerte-masken i nedre høyre hjørne:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") right bottom/150px no-repeat;
}

Результат:

Eksempel . Maskens posisjon

Hjerte-masken sentrert til venstre:

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

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

Результат:

Eksempel . Maskens posisjon

Hjerte-masken sentrert:

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

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

Результат:

Eksempel . Maskens posisjon

Hjerte-masken 100px fra venstre og 200px fra toppen:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") 100px 200px /150px no-repeat;
}

Результат:

Eksempel . Maskens størrelse cover

Verdien cover skalerer masken slik at den dekker elementet fullstendig, og opprettholder proporsjonene. Kan beskjære kantene på masken hvis proporsjonene ikke stemmer overens:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/cover;
}

Результат:

Eksempel . Maskens størrelse contain

Verdien contain skalerer masken slik at den hele passer inn i elementet, og opprettholder proporsjonene. Kan etterlate tomme områder:

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

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

Результат:

Eksempel . Maskens størrelse

Fast størrelse setter de nøyaktige dimensjonene til masken. For eksempel, la oss lage en maske på 50px:

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

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

Результат:

Eksempel . Gjentakelse no-repeat

Verdien no-repeat deaktiverer gjentakelse av masken. Masken vises bare én gang i den angitte posisjonen:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") top left / 150px no-repeat;
}

Результат:

Eksempel . Gjentakelse repeat-x

Verdien repeat-x gjentar masken bare langs den horisontale aksen:

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

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left center / 50px repeat-x;
}

Результат:

Eksempel . Komposisjon add

Verdien add legger sammen flere masker (resultatet er en union av alle masker):

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

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 200px 30px / 150px no-repeat;
  mask-composite: add;
}

Результат:

Eksempel . Komposisjon intersect

Verdien intersect viser bare området der maskene krysser hverandre:

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

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 50px 30px / 150px no-repeat;
  mask-composite: intersect;
}

Результат:

Eksempel . Komposisjon exclude

Verdien exclude viser områdene av maskene som ikke krysser hverandre:

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

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 50px 30px / 150px no-repeat;
  mask-composite: exclude;
}

Результат:

Eksempel . Komposisjon subtract

Verdien subtract trekker den andre masken fra den første. La oss for eksempel lage ett hjerte og trekke fra det en pil:

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

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 250px no-repeat,
    url("arrow.svg") 170px 80px / 120px no-repeat;
    
    
  mask-composite: subtract;
}

Результат:

Eksempel . Utvidet skrivemåte for mask

Egenskapen mask, skrevet med separate komponenter:

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

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-origin: content-box;
  mask-clip: content-box;
  mask-mode: alpha;
  mask-composite: add;
}

Результат:

Eksempel . SVG for bilde

Bruk av SVG-element som maske for bilde:

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;
  background: red;
  mask: url(#mask);
}

Результат:

Eksempel . SVG for gradient

Bruk av SVG-element som maske for gradient:

html<div id="elem"></div>
<svg width="0" height="0">
  <mask id="star-mask">
    <path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
  </mask>
</svg>

css#elem {
  width: 500px;
  height: 300px;
  background: linear-gradient(45deg, red, blue);
  mask: url(#star-mask);
}

Результат:

Se også