Proprietatea CSS mask-image
Mascarea CSS ascunde o parte dintr-un element sau tot elementul prin plasarea unui strat de mască peste el.
Imaginea stratului o alegi cu proprietatea mask-image. Merg atât imaginile PNG, cât și cele SVG, precum și gradienții CSS și elementul SVG <mask>.
Folosirea unei Imagini PNG ca Strat de Mască
O imagine PNG este transmisă ca strat de mască printr-o valoare url().
O astfel de imagine trebuie să conțină o zonă transparentă sau semi-transparentă. Transparența ascunde elementul, în timp ce pixelii opaci, chiar și cei negri, îl lasă vizibil.
Aici lucrează împreună două proprietăți. mask-image numește imaginea care maschează elementul, iar mask-repeat decide dacă și cum se repetă acea imagine, no-repeat afișând-o o singură dată.
Exemplu
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Mask Image - PNG</title>
<style>
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>CSS Mask Image - PNG</h1>
<p>The mask-image property specifies the image to be used as a mask layer for an element.</p>
<img class="mask1" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
Repetarea Imaginii Stratului de Mască
Dacă renunți la proprietatea mask-repeat, imaginea de mască se repetă peste toată imaginea.
Exemplu
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Mask Image - Repeat</title>
<style>
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
}
</style>
</head>
<body>
<h1>CSS Mask Image - Repeat</h1>
<p>If we omit the mask-repeat property, the mask image will be repeated all over the image.</p>
<img class="mask1" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
Poziționarea Imaginii Stratului de Mască
O imagine de mască pornește din colțul din stânga sus al elementului său și se repetă în ambele direcții. Pentru a o face să pornească din altă parte, folosește mask-position, a cărei valoare este relativă la zona de poziționare a măștii.
Exemplu
Aici imaginea stratului de mască stă în centru:
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Mask Image - Position</title>
<style>
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
</style>
</head>
<body>
<h1>CSS Mask Image - Position</h1>
<p>The mask-position property sets the starting position of a mask image.</p>
<img class="mask1" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>