103 of 313 menu

თვისება mask

თვისება mask არის შემოკლება ყველა მასკირების თვისებისთვის და საშუალებას აძლევს დააყენოს: გამოსახულება-მასკა, მისი პოზიცია, ზომა, შერწყმის რეჟიმი და სხვა პარამეტრები.

არის შემოკლებული თვისება შემდეგი თვისებებისთვის: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

სინტაქსი

სელექტორი {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

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

მნიშვნელობა	აღწერა
`none`	აუქმებს მასკირებას (ნაგულისხმევი მნიშვნელობა)
`url()`	ბილიკი მასკის გამოსახულებამდე (SVG, PNG)
`linear-gradient()`	ხაზოვანი გრადიენტი მასკად
`radial-gradient()`	რადიალური გრადიენტი მასკად
`position`	მასკის პოზიცია (top, center, 50% 50% და სხვ.)
`size`	მასკის ზომა (cover, contain, 100px 50px)
`repeat`	მასკის გამეორება (no-repeat, repeat-x, space)
`mode`	შერწყმის რეჟიმი (alpha, luminance, match-source)
`composite`	მასკების კომპოზიცია (add, subtract, intersect, exclude)

გამოსახულებების მომზადება

გვქონდეს ბუნების გამოსახულება, რომელსაც ჩვენ დავამუშავებთ, და SVG გამოსახულებები გულის და ისრის, რომლის მიხედვითაც ჩვენ გავჭრით:

<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

:

მაგალითი . მასკა-გამოსახულება

დავადოთ მასკა-გულის ფორმა ჩვენს გამოსახულებაზე:

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

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url("heart.svg") center/300px no-repeat;
}

:

მაგალითი . მასკის პოზიცია

მასკა-გული ზედა მარცხენა კუთხეში:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left top/150px no-repeat;
}

:

მაგალითი . მასკის პოზიცია

მასკა-გული ქვედა მარჯვენა კუთხეში:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") right bottom/150px no-repeat;
}

:

მაგალითი . მასკის პოზიცია

მასკა-გული ცენტრში მარცხნივ:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center/150px no-repeat;
}

:

მაგალითი . მასკის პოზიცია

მასკა-გული ცენტრში:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
}

:

მაგალითი . მასკის პოზიცია

მასკა-გული 100px მარცხნიდან და 200px ზემოდან:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") 100px 200px /150px no-repeat;
}

:

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

მნიშვნელობა cover მასშტაბირებს მასკას, რათა ის მთლიანად დაფაროს ელემენტი, პროპორციების შენარჩუნებით. შეიძლება მასკის კიდეები დაიჭრას, თუ პროპორციები არ ემთხვევა:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/cover;
}

:

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

მნიშვნელობა contain მასშტაბირებს მასკას, რათა ის მთლიანად ჩაიტიოს ელემენტში, პროპორციების შენარჩუნებით. შეიძლება დატოვოს ცარიელი ადგილები:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/contain no-repeat;
}

:

მაგალითი . მასკის ზომა

ფიქსირებული ზომა ადგენს მასკის ზუსტ ზომებს. მაგალითად, შევქმნათ მასკა ზომით 50px:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/50px no-repeat;
}

:

მაგალითი . გამეორება no-repeat

მნიშვნელობა no-repeat აუქმებს მასკის გამეორებას. მასკა გამოსახულია მხოლოდ ერთხელ მითითებულ პოზიციაზე:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") top left / 150px no-repeat;
}

:

მაგალითი . გამეორება repeat-x

მნიშვნელობა repeat-x მასკას მეორდება მხოლოდ ჰორიზონტალური ღერძის გასწვრივ:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center / 50px repeat-x;
}

:

მაგალითი . კომპოზიცია add

მნიშვნელობა add აგროვებს რამდენიმე მასკას (შედეგი - ყველა მასკის გაერთიანება):

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

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 200px 30px / 150px no-repeat;
	mask-composite: add;
}

:

მაგალითი . კომპოზიცია intersect

მნიშვნელობა intersect აჩვენებს მხოლოდ მასკების გადაკვეთის არეს:

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

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: intersect;
}

:

მაგალითი . კომპოზიცია exclude

მნიშვნელობა exclude აჩვენებს მასკების იმ არეებს, რომლებიც არ იკვეთება:

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

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: exclude;
}

:

მაგალითი . კომპოზიცია subtract

მნიშვნელობა subtract აკლებს მეორე მასკას პირველს. მაგალითისთვის, შევქმნათ ერთი გული და გამოვაკლოთ მას ისარი:

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

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 250px no-repeat,
		url("arrow.svg") 170px 80px / 120px no-repeat;
		
		
	mask-composite: subtract;
}

:

მაგალითი . mask-ის განვრცობილი ჩანაწერი

თვისება mask, დაწერილი ცალკეული კომპონენტებით:

<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;
	mask-origin: content-box;
	mask-clip: content-box;
	mask-mode: alpha;
	mask-composite: add;
}

:

მაგალითი . SVG გამოსახულებისთვის

SVG-ელემენტის გამოყენება მასკად გამოსახულებისთვის:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url(#mask);
}

:

მაგალითი . SVG გრადიენტისთვის

SVG-ელემენტის გამოყენება მასკად გრადიენტისთვის:

<div id="elem"></div>
<svg width="0" height="0">
	<mask id="star-mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask: url(#star-mask);
}

:

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

თვისება mask-position,
განსაზღვრავს მასკის პოზიციას ელემენტთან მიმართებით
თვისება mask-image,
აყენებს გამოსახულებას მასკისთვის
თვისება mask-mode,
განსაზღვრავს როგორ ურთიერთქმედებს მასკა ფონთან
თვისება mask-size,
განსაზღვრავს მასკის ზომას
თვისება mask-repeat,
განსაზღვრავს მასკის გამეორებას
თვისება mask-origin,
განსაზღვრავს მასკის პოზიციონირების არეს
თვისება mask-clip,
განსაზღვრავს მასკის ამოჭრის არეს
თვისება mask-composite,
განსაზღვრავს როგორ კომბინირდება რამდენიმე მასკა

↑

ქართული▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch Ελληνικά English Español Eesti Suomi Français हिन्दी Magyar Հայերեն Indonesia Italiano 日本語 Қазақ 한국어 Кыргызча Lietuvių Latviešu Македонски Melayu မြန်မာ Nederlands Norsk Polski Português Română Русский සිංහල Slovenčina Slovenščina Shqip Српски Srpski Svenska Kiswahili Тоҷикӣ ไทย Türkmen Türkçe Ўзбек Oʻzbek Tiếng Việt

ვებსაიტის მუშაობის, ანალიტიკისა და პერსონალიზაციისთვის ვიყენებთ ქუქი-ფაილებს. მონაცემთა დამუშავება ხდება Კონფიდენციალურობის პოლიტიკის შესაბამისად.

ყველას მიღება პარამეტრები უარყოფა