თვისება mask-size
თვისება mask-size ადგენს ნიღბის სურათის ზომას. შეგიძლიათ მიუთითოთ კონკრეტული ზომები პიქსელებში/პროცენტებში ან გამოიყენოთ საკვანძო სიტყვები cover და contain.
სინტაქსი
სელექტორი {
mask-size: auto | <length> | <percentage> | cover | contain;
}
მნიშვნელობები
| მნიშვნელობა | აღწერა |
|---|---|
auto |
სურათის ორიგინალური ზომა (ნაგულისხმევი). |
cover |
შეუსაბამებს ნიღაბს პროპორციების შენარჩუნებით, რათა ის მთლიანად დაფაროს ელემენტი. |
contain |
შეუსაბამებს ნიღაბს პროპორციების შენარჩუნებით, რათა ის მთლიანად მოთავსდეს ელემენტში. |
100px 50px |
კონკრეტული ზომები პიქსელებში. |
50% 100% |
ზომები პროცენტებში ელემენტის ზომებთან მიმართებაში. |
მაგალითი . ზომა cover
ნიღაბი მასშტაბირდება, რათა მთლიანად დაფაროს ელემენტი:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
მაგალითი . ზომა contain
ნიღაბი მასშტაბირდება, რათა მთლიანად მოთავსდეს ელემენტში:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
მაგალითი . ფიქსირებული ზომა პიქსელებში
ნიღაბი ზომით 150×150 პიქსელი:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
მაგალითი . ზომა პროცენტებში
ნიღაბი იკავებს ელემენტის სიგანის 80%-ს და სიმაღლის 60%-ს:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
მაგალითი . სხვადასხვა ზომები ღერძებზე
ნიღაბი 200px სიგანეში და 100px სიმაღლეში:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
იხილეთ აგრეთვე
-
თვისება
mask-position,
განსაზღვრავს ნიღბის მდებარეობას -
თვისება
mask-repeat,
განსაზღვრავს ნიღბის გამეორებას -
თვისება
mask,
შემოკლება ნიღბის ყველა თვისებისთვის
