Thuộc tính mask-image CSS

Trang trước mask-composite
Trang tiếp theo mask-mode

Định nghĩa và cách sử dụng

mask-image Thuộc tính được sử dụng để chỉ định hình ảnh được sử dụng làm lớp che cho phần tử.

Lưu ý:Gradient thẳng và tròn trong CSS cũng có thể được sử dụng làm hình ảnh che.

Thực hành

Ví dụ 1

Tạo lớp che cho hình ảnh:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: không lặp lại;
}

Thử ngay

Ví dụ 2

Sử dụng gradient thẳng và tròn để tạo các lớp che ảnh khác nhau cho hình ảnh:

.mask1 {
  -webkit-mask-image: gradient thẳng từ đen đến trong suốt;
  mask-image: gradient thẳng từ đen đến trong suốt;
}
.mask2 {
  -webkit-mask-image: gradient tròn từ đen 50%, rgba(0, 0, 0, 0.5) 50%;
  mask-image: gradient tròn từ đen 50%, rgba(0, 0, 0, 0.5) 50%;
}
.mask3 {
  -webkit-mask-image: gradient tròn từ đen 50%, rgba(0, 0, 0, 0.5) 50%;
  mask-image: gradient tròn từ đen 50%, rgba(0, 0, 0, 0.5);
}

Thử ngay

Ví dụ 3

Sử dụng phần tử <mask> SVG để tạo lớp che cho hình ảnh:

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

Thử ngay

Ví dụ 4

Sử dụng phần tử <mask> SVG để tạo lớp che khác cho hình ảnh:

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

Thử ngay

Cú pháp CSS

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

Giá trị thuộc tính

Giá trị	Mô tả
none	Giá trị mặc định. Không sử dụng hình ảnh che.
image	Sử dụng hình ảnh làm lớp che.
url()	Định dạng URL của hình ảnh hoặc phần tử <mask> SVG.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	none
Kế thừa:	Không
Chế tạo animation:	Không hỗ trợ. Xem thêm:Tính chất liên quan đến animation.
Phiên bản:	Module Masking CSS Cấp 1
Cú pháp JavaScript:	object.style.maskImage="url(star.svg)"