Proprietatea mask-image
Proprietatea mask-image permite setarea unei imagini care va fi utilizată ca mască pentru element. Masca determină care părți ale elementului vor fi vizibile și care vor fi ascunse. Ca mască se pot utiliza imagini SVG, PNG sau gradiente.
Sintaxă
selector {
mask-image: none | <image> | <url>;
}
Valori
| Valoare | Descriere |
|---|---|
none |
Dezactivează mascarea (valoarea implicită). |
url() |
Calea către imaginea-mască (SVG, PNG). |
linear-gradient() |
Gradient liniar ca mască. |
radial-gradient() |
Gradient radial ca mască. |
Exemplu . Utilizarea SVG ca mască
Aplicăm o imagine SVG cu forma unei inimi ca mască peste o imagine:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 300px;
mask-repeat: no-repeat;
}
:
Exemplu . Utilizarea gradientului ca mască
Aplicăm un gradient liniar ca mască pentru un element:
<div id="elem"></div>
#elem {
width: 500px;
height: 300px;
background: linear-gradient(45deg, red, blue);
mask-image: linear-gradient(to right, transparent, black);
}
:
Exemplu . Utilizarea elementului SVG ca mască
Creăm o mască folosind un element SVG și o aplicăm pe o imagine:
<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>
#image {
width: 500px;
height: 281px;
mask-image: url(#mask);
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
Vezi și
-
proprietatea
mask-position,
definește poziția măștii relativ la element -
proprietatea
mask-size,
definește dimensiunea măștii -
proprietatea
mask-repeat,
definește repetarea măștii -
proprietatea
mask-mode,
definește cum interacționează masca cu fundalul -
proprietatea
mask,
prescurtare pentru toate proprietățile de mascare