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

เราใช้คุกกี้สำหรับการทำงานของเว็บไซต์ การวิเคราะห์ และการปรับเนื้อหาให้เหมาะสมส่วนบุคคล การประมวลผลข้อมูลเกิดขึ้นตาม นโยบายความเป็นส่วนตัว.

ยอมรับทั้งหมด ปรับแต่ง ปฏิเสธ