Lastnost mask-composite
Lastnost mask-composite omogoča kombiniranje več mask, ki se uporabljajo za en element. Določa, kako bodo različne maske medsebojno delovale pri njihovem prekrivanju.
Sintaksa
selektor {
mask-composite: <compositing-operator>#;
}
Vrednosti
| Vrednost | Opis |
|---|---|
add |
Rezultat je združitev vseh mask (privzeto). |
subtract |
Druga maska se odšteje od prve. |
intersect |
Prikaže se samo območje presečišča mask. |
exclude |
Prikazejo se območja, ki niso skupna maskam. |
Primer . Način add
Združitev dveh mask (srce in puščica):
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image:
url("heart.svg"),
url("arrow.svg");
mask-position:
100px 50px,
200px 30px;
mask-size: 150px;
mask-repeat: no-repeat;
mask-composite: add;
}
:
Primer . Način subtract
Odštevanje puščice od srca:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image:
url("heart.svg"),
url("arrow.svg");
mask-position:
100px 50px,
170px 80px;
mask-size:
250px,
120px;
mask-repeat: no-repeat;
mask-composite: subtract;
}
:
Primer . Način intersect
Prikaz samo območja presečišča mask:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image:
url("heart.svg"),
url("arrow.svg");
mask-position:
100px 50px,
50px 30px;
mask-size: 150px;
mask-repeat: no-repeat;
mask-composite: intersect;
}
:
Primer . Način exclude
Prikaz območij, ki niso skupna:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image:
url("heart.svg"),
url("arrow.svg");
mask-position:
100px 50px,
50px 30px;
mask-size: 150px;
mask-repeat: no-repeat;
mask-composite: exclude;
}
:
Primer . Kombinacija z gradienti
Uporaba z gradientnimi maskami:
<div id="gradient-box"></div>
#gradient-box {
width: 400px;
height: 400px;
background: linear-gradient(45deg, red, yellow, green, blue);
mask-image:
radial-gradient(circle at 30% 30%, black 40%, transparent 70%),
radial-gradient(circle at 70% 70%, black 40%, transparent 70%);
mask-composite: exclude;
}
:
Glejte tudi
-
lastnost
mask-image,
nastavi slike za maske -
lastnost
mask,
okrajšava za vse lastnosti maskiranja -
lastnost
mask-mode,
določa način prekrivanja maske -
lastnost
mix-blend-mode,
določa način prekrivanja elementov