mask-position Özelliği
mask-position özelliği, maskenin öğeye göre başlangıç konumunu ayarlar.
background-position gibi çalışır, ancak maskelere uygulanır.
Sözdizimi
seçici {
mask-position: <position>;
}
Değerler
| Değer | Açıklama |
|---|---|
top left |
Sol üst köşede (varsayılan). |
center |
Öğenin ortasında. |
50% 50% |
Center ile aynı. |
right bottom |
Sağ alt köşede. |
100px 200px |
Piksel cinsinden belirli koordinatlar. |
Örnek . Maskenin Ortalanması
Görüntünün ortasında kalp şeklinde 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 . Sol Üst Köşe
Sol üst köşede maske:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Örnek . Sağ Alt Köşe
Sağ alt köşede maske:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Örnek . Tam Koordinatlar
Maske tam koordinatlara göre konumlandırılır:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Örnek . Yüzde Konumlandırma
Maskenin yüzdeler kullanılarak konumlandırılması:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Ayrıca Bakınız
-
mask-sizeözelliği,
maskenin boyutunu belirler -
mask-originözelliği,
konumlandırma için başlangıç noktasını belirler -
masközelliği,
tüm maskeleme özellikleri için kısa yazım
