Mask eienskap

Die eienskap mask is 'n afkorting vir alle maskeringseienskappe en laat toe om te spesifiseer: 'n maskerbeeld, sy posisie, grootte, vermengingsmodus en ander parameters.

Is 'n verkorte eienskap vir die volgende eienskappe: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintaksis

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

Waardes

Voorbereiding van beelde

Kom ons het 'n natuurbeeld wat ons gaan vorm, en SVG-beelde van 'n hartjie en pyl, waarlangs ons gaan uitsny:

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

Результат:

Voorbeeld . Maskerbeeld

Kom ons lê 'n hartmasker op ons beeld:

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

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

Результат:

Voorbeeld . Maskerposisie

Hartmasker in die linkerbovenhoek:

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

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

Результат:

Voorbeeld . Maskerposisie

Hartmasker in die regteronderhoek:

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

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

Результат:

Voorbeeld . Maskerposisie

Hartmasker in die middel links:

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

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

Результат:

Voorbeeld . Maskerposisie

Hartmasker in die middel:

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

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

Результат:

Voorbeeld . Maskerposisie

Hartmasker 100px van links en 200px van bo:

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

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

Результат:

Voorbeeld . Maskergrootte cover

Die waarde cover skaal die masker sodat dit die element volledig bedek, met behoud van verhoudings. Kan maskerrande sny as verhoudings nie ooreenstem nie:

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

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

Результат:

Voorbeeld . Maskergrootte contain

Die waarde contain skaal die masker sodat dit volledig in die element pas, met behoud van verhoudings. Kan leë areas laat:

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

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

Результат:

Voorbeeld . Maskergrootte

Vaste grootte stel presiese maskergrootte in. Byvoorbeeld, laat ons 'n masker maak met grootte 50px:

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

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

Результат:

Voorbeeld . Herhaling no-repeat

Die waarde no-repeat skakel maskerherhaling af. Die masker word net een keer in die gespesifiseerde posisie vertoon:

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

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

Результат:

Voorbeeld . Herhaling repeat-x

Die waarde repeat-x herhaal die masker net op die horisontale as:

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

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

Результат:

Voorbeeld . Samestelling add

Die waarde add tel verskeie maskers op (resultaat - vereniging van alle maskers):

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

Результат:

Voorbeeld . Samestelling intersect

Die waarde intersect toon net die gebied van maskers kruising:

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

Результат:

Voorbeeld . Samestelling exclude

Die waarde exclude toon die gebiede van maskers wat nie kruis nie:

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

Результат:

Voorbeeld . Samestelling subtract

Die waarde subtract trek die tweede masker van die eerste af. Vir die voorbeeld, laat ons een hartjie maak en die pyl daarvan aftrek:

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

Результат:

Voorbeeld . Uitgebreide mask skryfwyse

Die mask eienskap, geskryf as afsonderlike komponente:

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

Результат:

Voorbeeld . SVG vir beeld

Gebruik van 'n SVG-element as masker vir 'n beeld:

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

Результат:

Voorbeeld . SVG vir gradiënt

Gebruik van 'n SVG-element as masker vir 'n gradiënt:

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

Результат:

Sien ook