Bảng lịch học

Sách tham khảo CSS

Thuộc tính CSS

Khóa học tự chọn

Khuyến nghị khóa học:

CodeW3C.com - Hộp báu

Thuộc tính mask CSS

Trang trước marker-start
Trang tiếp theo mask-clip

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

mask Thuộc tính này được sử dụng để ẩn phần tử bằng cách che khuất hoặc cắt hình ảnh (phần hoặc toàn bộ).

mask Thuộc tính là hình thức viết tắt của các thuộc tính sau:

Mô hình

Ví dụ 1

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

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

Thử nghiệm trực tiếp

Ví dụ 2

Sử dụng độ dịch chuyển tuyến tính và độ dịch chuyển tròn để tạo lớp che khuất khác nhau cho hình ảnh:

.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%);
}

Thử nghiệm trực tiếp

Ví dụ 3

Sử dụng phần tử <mask> của SVG để tạo lớp che khuất 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ử nghiệm trực tiếp

Ví dụ 4

Sử dụng phần tử <mask> của SVG để tạo lớp che khuất 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ử nghiệm trực tiếp

Ngữ pháp CSS

mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

Giá trị thuộc tính

Giá trị	Mô tả
mask-image	Đ指定 hình ảnh được sử dụng làm lớp che phủ của phần tử. Giá trị mặc định là none.
mask-mode	Đ指定 hình ảnh lớp che phủ nên được coi là lớp che罩 sáng hay alpha. Giá trị mặc định là match-source.
mask-repeat	Đặt hình ảnh che phủ có lặp lại hay không và cách lặp lại. Giá trị mặc định là repeat.
mask-position	Đặt vị trí bắt đầu của hình ảnh che phủ (so với khu vực vị trí che phủ). Giá trị mặc định là 0% 0%.
mask-clip	Đ指定 khu vực ảnh che phủ ảnh hưởng. Giá trị mặc định là border-box.
mask-origin	Đ指定 vị trí bắt đầu của hình ảnh lớp che phủ (khu vực vị trí che phủ). Giá trị mặc định là border-box.
mask-size	Đ指定 kích thước của hình ảnh lớp che phủ. Giá trị mặc định là auto.
mask-composite	Đ指定 cách hợp thành giữa lớp che phủ hiện tại và lớp che phủ bên dưới. Giá trị mặc định là add.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Kế thừa 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 match-source repeat 0% 0% border-box border-box auto add
Kế thừa:	Không
Chế tạo animation:	Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	Module Masking CSS Level 1
Ngữ pháp JavaScript:	object.style.mask="url(star.svg)"