Thuộc tính mặt nạ-hình ảnh CSS

❮ Trước đó Tham chiếu CSS hoàn chỉnh Tiếp theo ❯

Thí dụ

Tạo một lớp mặt nạ cho một hình ảnh:

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

Thêm các ví dụ "Hãy tự mình thử" bên dưới.

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

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

Mẹo: Gradient tuyến tính và xuyên tâm trong CSS cũng có thể được sử dụng làm hình ảnh mặt nạ.

Giá trị mặc định:	không ai
Thừa hưởng:	không
Hoạt hình:	không. Đọc về hoạt hình
Phiên bản:	CSS3
Cú pháp JavaScript:	đối tượng .style.maskImage = "url (star.svg)"

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Các số theo sau -webkit- chỉ định phiên bản đầu tiên hoạt động với tiền tố.

Property
mask-image	4.0 -webkit-	79.0 -webkit-	53.0	4.0 -webkit-	15.0 -webkit-

Cú pháp CSS

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

Giá trị tài sản

Value	Description
none	This is default
image	An image to use as the mask layer
url	An url reference to an image or an SVG <mask> element
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Các ví dụ khác

Thí dụ

Tạo các lớp mặt nạ khác nhau cho một hình ảnh với các gradient tuyến tính và xuyên tâm:

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