თვისება mask-repeat
თვისება mask-repeat აზუსტებს ნიღბის გამეორების ხერხს, თუ მისი ზომები ელემენტის ზომებზე ნაკლებია.
მუშაობს background-repeat-ის ანალოგიურად,
მაგრამ ვრცელდება ნიღბებზე.
სინტაქსი
სელექტორი {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
მნიშვნელობები
| მნიშვნელობა | აღწერა |
|---|---|
repeat |
ნიღაბი მეორდება ორივე ღერძის მიმართ (ნაგულისხმევად). |
no-repeat |
ნიღაბი არ მეორდება. |
repeat-x |
ნიღაბი მეორდება მხოლოდ ჰორიზონტალურად. |
repeat-y |
ნიღაბი მეორდება მხოლოდ ვერტიკალურად. |
space |
ნიღაბი მეორდება თანაბარი ინტერვალებით. |
round |
ნიღაბი მასშტაბირდება ერთგვაროვანი შევსებისთვის. |
მაგალითი . გამეორების გარეშე (no-repeat)
ერთი გულის ფორმა ცენტრში, გამეორების გარეშე:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 100px;
mask-repeat: no-repeat;
}
:
მაგალითი . ჰორიზონტალური გამეორება (repeat-x)
გულის ფორმები მეორდება მხოლოდ ჰორიზონტალურად:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left center;
mask-size: 50px;
mask-repeat: repeat-x;
}
:
მაგალითი . ვერტიკალური გამეორება (repeat-y)
გულის ფორმები მეორდება მხოლოდ ვერტიკალურად:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center top;
mask-size: 50px;
mask-repeat: repeat-y;
}
:
მაგალითი . გამეორება ინტერვალებით (space)
გულის ფორმები თანაბრად ნაწილდება ინტერვალებით:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
მაგალითი . მასშტაბური გამეორება (round)
გულის ფორმები მასშტაბირდება ერთგვაროვანი შევსებისთვის:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
იხილეთ აგრეთვე
-
თვისება
mask-size,
განსაზღვრავს ნიღბის ზომას -
თვისება
mask-position,
აზუსტებს ნიღბის მდებარეობას -
თვისება
mask,
ნიღბის ყველა თვისების შემოკლებული ჩანაწერი
