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

cssseçici {
  mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}

Değerler

Örnek . Tekrarsız (no-repeat)

Merkezde, tekrarsız tek bir kalp:

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

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

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

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

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

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

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

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

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

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-size: 80px;
  mask-repeat: round;
}

Результат:

Ayrıca Bakınız