თვისება mask-size

თვისება mask-size ადგენს ნიღბის სურათის ზომას. შეგიძლიათ მიუთითოთ კონკრეტული ზომები პიქსელებში/პროცენტებში ან გამოიყენოთ საკვანძო სიტყვები cover და contain.

სინტაქსი

cssსელექტორი {
  mask-size: auto | <length> | <percentage> | cover | contain;
}

მნიშვნელობები

მაგალითი . ზომა cover

ნიღაბი მასშტაბირდება, რათა მთლიანად დაფაროს ელემენტი:

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;
}

Результат:

მაგალითი . ზომა contain

ნიღაბი მასშტაბირდება, რათა მთლიანად მოთავსდეს ელემენტში:

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;
}

Результат:

მაგალითი . ფიქსირებული ზომა პიქსელებში

ნიღაბი ზომით 150×150 პიქსელი:

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;
}

Результат:

მაგალითი . ზომა პროცენტებში

ნიღაბი იკავებს ელემენტის სიგანის 80%-ს და სიმაღლის 60%-ს:

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;
}

Результат:

მაგალითი . სხვადასხვა ზომები ღერძებზე

ნიღაბი 200px სიგანეში და 100px სიმაღლეში:

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;
}

Результат:

იხილეთ აგრეთვე