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

cssseçici {
  mask-size: auto | <length> | <percentage> | cover | contain;
}

Değerler

Örnek . Cover Boyutu

Maske, öğeyi tamamen kaplayacak şekilde ölçeklenir:

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

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

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

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

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 . Yüzde Cinsinden Boyut

Maske, öğenin genişliğinin %80'ini ve yüksekliğinin %60'ını kaplar:

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

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

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

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