mask-size Özelliği
mask-size özelliği, maske görüntüsünün boyutunu ayarlar. Piksel/yüzde cinsinden belirli boyutlar belirlenebilir veya cover ve contain anahtar kelimeleri kullanılabilir.
Sözdizimi
seçici {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Değerler
| Değer | Açıklama |
|---|---|
auto |
Görüntünün orijinal boyutu (varsayılan). |
cover |
Maskeyi, öğeyi tamamen kaplayacak şekilde oranları koruyarak ölçeklendirir. |
contain |
Maskeyi, öğenin içine tamamen sığacak şekilde oranları koruyarak ölçeklendirir. |
100px 50px |
Piksel cinsinden belirli boyutlar. |
50% 100% |
Öğenin boyutlarına göre yüzde cinsinden boyutlar. |
Örnek . Cover Boyutu
Maske, öğeyi tamamen kaplayacak şekilde ölçeklenir:
<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;
}
:
Örnek . Contain Boyutu
Maske, öğenin içine tamamen sığacak şekilde ölçeklenir:
<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;
}
:
Örnek . Piksel Cinsinden Sabit Boyut
150×150 piksel boyutunda maske:
<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;
}
:
Örnek . Yüzde Cinsinden Boyut
Maske, öğenin genişliğinin %80'ini ve yüksekliğinin %60'ını kaplar:
<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;
}
:
Örnek . Eksenlerde Farklı Boyutlar
Genişliği 200px ve yüksekliği 100px olan maske:
<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;
}
:
Ayrıca Bakınız
-
mask-positionözelliği,
maske konumunu belirler -
mask-repeatözelliği,
maske tekrarını belirler -
masközelliği,
tüm maskeleme özellikleri için kısa yazım
