A mask-size tulajdonság
A mask-size tulajdonság beállítja a maszk kép méretét. Megadhatunk konkrét méreteket pixelben/százalékban, vagy használhatjuk a cover és contain kulcsszavakat.
Szintaxis
selector {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Értékek
| Érték | Leírás |
|---|---|
auto |
A kép eredeti mérete (alapértelmezett). |
cover |
Arányosan átméretezi a maszkot úgy, hogy az teljesen lefedje az elemet. |
contain |
Arányosan átméretezi a maszkot úgy, hogy az teljesen beleférjen az elembe. |
100px 50px |
Konkrét méretek pixelben. |
50% 100% |
Méretek százalékban az elem méretéhez képest. |
Példa . Cover méret
A maszk átméretezve, hogy teljesen lefedje az elemet:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
Példa . Contain méret
A maszk átméretezve, hogy teljesen beleférjen az elembe:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
Példa . Rögzített méret pixelben
150×150 pixel méretű maszk:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Példa . Méret százalékban
A maszk az elem szélességének 80%-át és magasságának 60%-át foglalja el:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
Példa . Különböző méretek a tengelyeken
200px széles és 100px magas maszk:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
Lásd még
-
a
mask-positiontulajdonság,
meghatározza a maszk elhelyezését -
a
mask-repeattulajdonság,
meghatározza a maszk ismétlését -
a
masktulajdonság,
rövidítés az összes maszkolási tulajdonságra
