คุณสมบัติ mask

คุณสมบัติ mask เป็นคุณสมบัติแบบย่อสำหรับคุณสมบัติการปิดบังทั้งหมดและอนุญาตให้กำหนด: ภาพหน้ากาก, ตำแหน่งของมัน, ขนาด, โหมดการผสม และพารามิเตอร์อื่นๆ

เป็นคุณสมบัติแบบย่อสำหรับคุณสมบัติต่อไปนี้: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite

ไวยากรณ์

cssตัวเลือก {
  mask: [mask-image] [mask-position] / [mask-size]
        [mask-repeat] [mask-origin] [mask-clip]
        [mask-mode] [mask-composite];
}

ค่า

การเตรียมภาพ

ให้เรามีภาพธรรมชาติที่เราจะตัด และภาพ SVG ของรูปหัวใจ และลูกศรที่เราจะใช้เป็นแม่แบบในการตัด:

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

Результат:

ตัวอย่าง . ภาพหน้ากาก

มาทำหน้ากากรูปหัวใจบนภาพของเรากัน:

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

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

Результат:

ตัวอย่าง . ตำแหน่งของหน้ากาก

หน้ากากรูปหัวใจที่มุมซ้ายบน:

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

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

Результат:

ตัวอย่าง . ตำแหน่งของหน้ากาก

หน้ากากรูปหัวใจที่มุมขวาล่าง:

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

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

Результат:

ตัวอย่าง . ตำแหน่งของหน้ากาก

หน้ากากรูปหัวใจที่ตรงกลางด้านซ้าย:

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

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

Результат:

ตัวอย่าง . ตำแหน่งของหน้ากาก

หน้ากากรูปหัวใจที่ตรงกลาง:

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

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

Результат:

ตัวอย่าง . ตำแหน่งของหน้ากาก

หน้ากากรูปหัวใจ 100px จากซ้ายและ 200px จากด้านบน:

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

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

Результат:

ตัวอย่าง . ขนาดของหน้ากาก cover

ค่า cover ปรับขนาดหน้ากากให้ครอบคลุมองค์ประกอบทั้งหมด โดยรักษาสัดส่วน อาจตัดขอบของหน้ากากหากสัดส่วนไม่ตรงกัน:

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

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

Результат:

ตัวอย่าง . ขนาดของหน้ากาก contain

ค่า contain ปรับขนาดหน้ากากให้พอดีกับองค์ประกอบทั้งหมด โดยรักษาสัดส่วน อาจทิ้งพื้นที่ว่างไว้:

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

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

Результат:

ตัวอย่าง . ขนาดของหน้ากาก

ขนาดคงที่กำหนดขนาดของหน้ากากอย่างแม่นยำ ตัวอย่างเช่น กำหนดหน้ากากขนาด 50px:

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

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

Результат:

ตัวอย่าง . การทำซ้ำ no-repeat

ค่า no-repeat ปิดการทำซ้ำของหน้ากาก หน้ากากจะแสดงเพียงครั้งเดียวในตำแหน่งที่ระบุ:

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

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

Результат:

ตัวอย่าง . การทำซ้ำ repeat-x

ค่า repeat-x ทำซ้ำหน้ากากเฉพาะตามแกนนอน:

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

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

Результат:

ตัวอย่าง . การรวมกัน add

ค่า add รวมหน้ากากหลายๆ อันเข้าด้วยกัน (ผลลัพธ์คือการรวมกันของหน้ากากทั้งหมด):

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

css#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 แสดงเฉพาะบริเวณที่หน้ากากทับซ้อนกัน:

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

css#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 แสดงบริเวณของหน้ากากที่ไม่ได้ทับซ้อนกัน:

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

css#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 ลบหน้ากากอันที่สองออกจากอันแรก ตัวอย่างเช่น สร้างรูปหัวใจหนึ่งรูปและลบ ลูกศรออกจากมัน:

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

css#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 ที่เขียนแยกเป็นส่วนประกอบ:

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

css#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 เป็นหน้ากาก สำหรับภาพ:

html<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>

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

Результат:

ตัวอย่าง . SVG สำหรับการไล่ระดับสี

การใช้องค์ประกอบ SVG เป็นหน้ากาก สำหรับการไล่ระดับสี:

html<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>

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

Результат:

ดูเพิ่มเติม