CSS ความปิดกั้น

การประกาศและการใช้งาน

mask คุณสมบัติใช้เพื่อซ่อนหรือตัดภาพ (ส่วนหนึ่ง หรือทั้งหมด) ด้วยชั้นคราบ

mask คุณสมบัติเป็นรูปแบบของคุณสมบัติดังนี้

ตัวอย่าง

ตัวอย่าง 1

สร้างชั้นคราบสำหรับภาพ

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

亲自试一试

ตัวอย่าง 2

ใช้กราดเชิงเส้นและกราดเชิงวงกลมสร้างชั้นคราบแบบต่าง ๆ สำหรับภาพ

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

亲自试一试

ตัวอย่าง 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: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

属性值

值 描述
mask-image 指定用作元素遮罩层的图像。默认值为 none。
mask-mode

指定遮罩层图像应被视为亮度遮罩还是 alpha 遮罩。

默认值为 match-source。
mask-repeat

设置遮罩图像是否/如何重复。

默认值为 repeat。
mask-position

设置遮罩图像的起始位置（相对于遮罩位置区域）。

默认值为 0% 0%。
mask-clip

指定遮罩图像影响的区域。

默认值为 border-box。
mask-origin

指定遮罩层图像的起始位置（遮罩位置区域）。

默认值为 border-box。
mask-size

指定遮罩层图像的大小。

默认值为 auto。
mask-composite

指定当前遮罩层与下方遮罩层使用的合成操作。

默认值为 add。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： none match-source repeat 0% 0% border-box border-box auto add
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS Masking Module Level 1
JavaScript 语法： object.style.mask="url(star.svg)"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

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

วิธีสอน：CSS ท่อนที่มีความปิดกั้น

อ้างอิง：CSS ความปิดกั้น

อ้างอิง：CSS ความปิดกั้นที่ตัดทอน

อ้างอิง：CSS ความปิดกั้นที่ผสมผสาน

อ้างอิง：CSS รูปภาพที่ใช้ในการปิดกั้น

อ้างอิง：CSS รูปแบบการปิดกั้น

อ้างอิง：CSS จุดที่เริ่มต้นการปิดกั้น

อ้างอิง：CSS ตำแหน่งการปิดกั้น

อ้างอิง：CSS รูปแบบการทำนองการปิดกั้น

อ้างอิง：CSS ขนาดการปิดกั้น

อ้างอิง：CSS ประเภทการปิดกั้น