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

cssseçici {
  mask-position: <position>;
}

Değerler

Örnek . Maskenin Ortalanması

Görüntünün ortasında kalp şeklinde maske:

html<img id="image" src="image.jpg">

css#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:

html<img id="image" src="image.jpg">

css#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:

html<img id="image" src="image.jpg">

css#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:

html<img id="image" src="image.jpg">

css#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ı:

html<img id="image" src="image.jpg">

css#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