CSS ความเคลื่อนไหวหน้ากาก-รูปภาพ

คำอธิบายและวิธีใช้

mask-image attribute ใช้เพื่อกำหนดภาพที่ใช้เป็นหน้ากากสำหรับองค์ประกอบส่วนต่างๆ ขององค์ประกอบ

คำเตือน:เรียกใช้กราดเชื่อมและกราดวงกลมใน CSS สามารถใช้เป็นภาพหน้ากากด้วย。

ตัวอย่าง

ตัวอย่าง 1

สร้างหน้ากากสำหรับภาพ:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
}

ลองทดลองเอง

ตัวอย่าง 2

ใช้ทางแบบกราดเชื่อมและแบบกราดวงกลมเพื่อสร้างหน้ากากแบบที่ต่างกันสำหรับภาพ:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  -webkit-mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5));
}

ลองทดลองเอง

ตัวอย่าง 3

ใช้ตัวแทน SVG <mask> สร้างหน้ากากสำหรับภาพ:

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

ลองทดลองเอง

ตัวอย่าง 4

ใช้ตัวแทน SVG <mask> สร้างหน้ากากเพิ่มเติมสำหรับภาพ:

<svg width="600" height="400">
  <mask id="svgmask1">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

ลองทดลองเอง

การเขียน CSS

mask-image: none|image|url()|initial|inherit;

ค่าคุณสมบัติ

รายละเอียดเทคโนโลยี

การสนับสนุนบราวเซอร์

เลขในตารางแสดงว่าเวอร์ชันบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

มีเลขที่มีสระ 'webkit-' หน้ามาแสดงว่าสีสีที่สนับสนุนสระนี้เป็นครั้งแรก。

หน้าที่เกี่ยวข้อง

คู่มือ：CSS ที่แก้ง

อ้างอิง：CSS ความเคลื่อนไหวหน้ากาก

อ้างอิง：CSS ความเคลื่อนไหวหน้ากาก-คลิป

อ้างอิง：CSS ความเคลื่อนไหวหน้ากาก-คอมโพซิต

อ้างอิง：CSS ความเคลื่อนไหวหน้ากาก-โมด์

อ้างอิง：CSS ความเคลื่อนไหวหน้ากาก-ต้นกำเนิด

อ้างอิง：CSS ความเคลื่อนไหวหน้ากาก-ตำแหน่ง

อ้างอิง：CSS ความเคลื่อนไหวหน้ากาก-การซ้ำ

อ้างอิง：CSS ความเคลื่อนไหวหน้ากาก-ขนาด

อ้างอิง：CSS ความเคลื่อนไหวหน้ากาก-ประเภท