103 of 313 menu

Sifat mask

Sifat mask adalah singkatan untuk semua sifat penutupan dan membolehkan anda menetapkan: imej-topeng, kedudukannya, saiz, mod campuran dan parameter lain.

Ialah sifat singkatan untuk sifat berikut: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintaks

selector {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

Nilai

Nilai	Keterangan
`none`	Mematikan penutupan (nilai lalai)
`url()`	Laluan ke imej-topeng (SVG, PNG)
`linear-gradient()`	Kecerunan linear sebagai topeng
`radial-gradient()`	Kecerunan jejari sebagai topeng
`position`	Kedudukan topeng (top, center, 50% 50% dll.)
`size`	Saiz topeng (cover, contain, 100px 50px)
`repeat`	Pengulangan topeng (no-repeat, repeat-x, space)
`mode`	Mod campuran (alpha, luminance, match-source)
`composite`	Komposisi topeng (add, subtract, intersect, exclude)

Penyediaan gambar

Katakan kita ada gambar alam semula jadi yang akan kita potong, dan gambar SVG hati dan anak panah, yang akan kita gunakan untuk memotong:

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

:

Contoh . Imej-topeng

Mari letakkan topeng hati pada gambar kita:

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

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

:

Contoh . Kedudukan topeng

Topeng hati di penjuru kiri atas:

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

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

:

Contoh . Kedudukan topeng

Topeng hati di penjuru kanan bawah:

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

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

:

Contoh . Kedudukan topeng

Topeng hati di tengah kiri:

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

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

:

Contoh . Kedudukan topeng

Topeng hati di tengah:

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

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

:

Contoh . Kedudukan topeng

Topeng hati 100px dari kiri dan 200px dari atas:

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

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

:

Contoh . Saiz topeng cover

Nilai cover menskala topeng untuk menutupi elemen sepenuhnya, mengekalkan perkadaran. Boleh memotong tepi topeng jika perkadaran tidak sepadan:

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

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

:

Contoh . Saiz topeng contain

Nilai contain menskala topeng agar muat sepenuhnya dalam elemen, mengekalkan perkadaran. Boleh meninggalkan kawasan kosong:

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

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

:

Contoh . Saiz topeng

Saiz tetap menetapkan dimensi tepat topeng. Sebagai contoh, mari buat topeng bersaiz 50px:

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

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

:

Contoh . Pengulangan no-repeat

Nilai no-repeat mematikan pengulangan topeng. Topeng dipaparkan hanya sekali pada kedudukan yang ditentukan:

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

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

:

Contoh . Pengulangan repeat-x

Nilai repeat-x mengulangi topeng hanya pada paksi mendatar:

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

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

:

Contoh . Komposisi add

Nilai add menambah beberapa topeng (hasil - gabungan semua topeng):

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

:

Contoh . Komposisi intersect

Nilai intersect menunjukkan hanya kawasan pertindihan topeng:

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

:

Contoh . Komposisi exclude

Nilai exclude menunjukkan kawasan topeng yang tidak bertindih:

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

:

Contoh . Komposisi subtract

Nilai subtract menolak topeng kedua dari pertama. Sebagai contoh, mari buat satu hati dan tolak anak panah daripadanya:

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

:

Contoh . Penulisan terperinci mask

Sifat mask, ditulis dengan komponen berasingan:

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

:

Contoh . SVG untuk gambar

Menggunakan elemen SVG sebagai topeng untuk gambar:

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

:

Contoh . SVG untuk kecerunan

Menggunakan elemen SVG sebagai topeng untuk kecerunan:

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

:

Lihat juga

sifat mask-position,
menentukan kedudukan topeng relatif kepada elemen
sifat mask-image,
menetapkan imej untuk topeng
sifat mask-mode,
menentukan bagaimana topeng berinteraksi dengan latar belakang
sifat mask-size,
menentukan saiz topeng
sifat mask-repeat,
menentukan pengulangan topeng
sifat mask-origin,
menentukan kawasan penempatan topeng
sifat mask-clip,
menentukan kawasan pemotongan topeng
sifat mask-composite,
menentukan bagaimana beberapa topeng digabungkan

↑

Melayu▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch Ελληνικά English Español Eesti Suomi Français हिन्दी Magyar Հայերեն Indonesia Italiano 日本語 ქართული Қазақ 한국어 Кыргызча Lietuvių Latviešu Македонски မြန်မာ 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

Kami menggunakan kuki untuk operasi laman web, analisis dan personalisasi. Pemprosesan data dijalankan mengikut Polisi Kerahsiaan.

terima semua tataletak tolak