mask-repeat Özelliği
mask-repeat özelliği, maskenin boyutları öğenin boyutlarından küçükse maskenin tekrarlanma şeklini belirtir.
background-repeat özelliğine benzer şekilde çalışır,
ancak maskelere uygulanır.
Sözdizimi
seçici {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Değerler
| Değer | Açıklama |
|---|---|
repeat |
Maske her iki eksende de tekrarlanır (varsayılan). |
no-repeat |
Maske tekrarlanmaz. |
repeat-x |
Maske sadece yatayda tekrarlanır. |
repeat-y |
Maske sadece dikeyde tekrarlanır. |
space |
Maske eşit aralıklarla tekrarlanır. |
round |
Maske, düzgün bir şekilde doldurmak için ölçeklenir. |
Örnek . Tekrarsız (no-repeat)
Merkezde, tekrarsız tek bir kalp:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 100px;
mask-repeat: no-repeat;
}
:
Örnek . Yatayda tekrarlama (repeat-x)
Kalpler sadece yatayda tekrarlanır:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left center;
mask-size: 50px;
mask-repeat: repeat-x;
}
:
Örnek . Dikeyde tekrarlama (repeat-y)
Kalpler sadece dikeyde tekrarlanır:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center top;
mask-size: 50px;
mask-repeat: repeat-y;
}
:
Örnek . Aralıklı tekrarlama (space)
Kalpler aralıklarla eşit şekilde dağıtılır:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Örnek . Ölçeklenebilir tekrarlama (round)
Kalpler, düzgün bir şekilde doldurmak için ölçeklenir:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Ayrıca Bakınız
-
mask-sizeözelliği,
maskenin boyutunu belirler -
mask-positionözelliği,
maskenin konumunu ayarlar -
masközelliği,
tüm maskeleme özellikleri için kısa yazım
