Mặt nạ CSS
Với CSS masking, bạn tạo một lớp mask để đặt trên một phần tử nhằm ẩn một phần hoặc toàn bộ các phần của phần tử.
Thuộc tính mặt nạ-hình ảnh CSS
Thuộc tính CSS mask-imagechỉ định một hình ảnh lớp mặt nạ.
Hình ảnh lớp mặt nạ có thể là hình ảnh PNG, hình ảnh SVG, gradient CSS hoặc phần tử SVG <mask> .
Hỗ trợ trình duyệt
Lưu ý: Hầu hết các trình duyệt chỉ hỗ trợ một phần cho CSS tạo mặt nạ. Bạn sẽ cần sử dụng tiền tố -webkit- ngoài thuộc tính tiêu chuẩn trong hầu hết các trình duyệt.
Các con số trong bảng dưới đây 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- |
Sử dụng một Hình ảnh làm Lớp mặt nạ
Để sử dụng hình ảnh PNG hoặc SVG làm lớp mặt nạ, hãy sử dụng giá trị url () để chuyển vào hình ảnh lớp mặt nạ.
Hình ảnh mặt nạ cần có một vùng trong suốt hoặc nửa trong suốt. Màu đen cho thấy hoàn toàn trong suốt.
Đây là hình ảnh mặt nạ (hình ảnh PNG) mà chúng tôi sẽ sử dụng:
Đây là hình ảnh từ Cinque Terre, ở Ý:
Bây giờ, chúng tôi áp dụng hình ảnh mặt nạ (hình ảnh PNG ở trên) làm lớp mặt nạ cho hình ảnh từ Cinque Terre, Ý:
Thí dụ
Đây là mã nguồn:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Giải thích ví dụ
Thuộc mask-imagetính chỉ định hình ảnh được sử dụng làm lớp mặt nạ cho một phần tử.
Thuộc mask-repeattính chỉ định nếu hoặc cách một hình ảnh mặt nạ sẽ được lặp lại. Giá no-repeat
trị chỉ ra rằng hình ảnh mặt nạ sẽ không được lặp lại (hình ảnh mặt nạ sẽ chỉ được hiển thị một lần).
Một vi dụ khac
Nếu chúng tôi bỏ qua thuộc mask-repeattính, hình ảnh mặt nạ sẽ được lặp lại trên toàn bộ hình ảnh từ Cinque Terre, Ý:
Thí dụ
Đây là mã nguồn:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
Sử dụng Gradients làm Lớp mặt nạ
CSS tuyến tính và gradient xuyên tâm cũng có thể được sử dụng làm hình ảnh mặt nạ.
Ví dụ về Gradient tuyến tính
Ở đây, chúng tôi sử dụng một gradient tuyến tính làm lớp mặt nạ cho hình ảnh của chúng tôi. Gradient tuyến tính này đi từ trên cùng (đen) xuống dưới (trong suốt):
Thí dụ
Sử dụng một gradient tuyến tính làm lớp mặt nạ:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
Ở đây, chúng tôi sử dụng một gradient tuyến tính cùng với mặt nạ văn bản làm lớp mặt nạ cho hình ảnh của chúng tôi:
Cinque Terre là một khu vực ven biển ở Liguria, ở phía tây bắc của Ý. Nó nằm ở phía tây của tỉnh La Spezia, và bao gồm năm ngôi làng: Monterosso al Mare, Vernazza, Corniglia, Manarola và Riomaggiore.
Cinque Terre là một khu vực ven biển ở Liguria, ở phía tây bắc của Ý. Nó nằm ở phía tây của tỉnh La Spezia, và bao gồm năm ngôi làng: Monterosso al Mare, Vernazza, Corniglia, Manarola và Riomaggiore.
Cinque Terre là một khu vực ven biển ở Liguria, ở phía tây bắc của Ý. Nó nằm ở phía tây của tỉnh La Spezia, và bao gồm năm ngôi làng: Monterosso al Mare, Vernazza, Corniglia, Manarola và Riomaggiore.
Thí dụ
Sử dụng một gradient tuyến tính cùng với mặt nạ văn bản làm lớp mặt nạ:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
Các ví dụ về Radial Gradient
Ở đây, chúng tôi sử dụng radial-gradient (có dạng hình tròn) làm lớp mặt nạ cho hình ảnh của chúng tôi:
Thí dụ
Sử dụng một gradient xuyên tâm làm lớp mặt nạ (hình tròn):
.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%);
}
Ở đây, chúng tôi sử dụng một gradient xuyên tâm (có hình elip) làm lớp mặt nạ cho hình ảnh của chúng tôi:
Thí dụ
Sử dụng một gradient xuyên tâm khác làm lớp mặt nạ (hình elip):
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0,
0, 0.5));
}
Sử dụng SVG làm Lớp mặt nạ
Phần tử SVG <mask>có thể được sử dụng bên trong đồ họa SVG để tạo hiệu ứng mặt nạ.
Ở đây, chúng tôi sử dụng phần tử SVG <mask>để tạo các lớp mặt nạ khác nhau cho hình ảnh của chúng tôi:
Thí dụ
Một lớp mặt nạ SVG (được tạo thành một hình tam giác):
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
Thí dụ
Lớp mặt nạ SVG (được tạo thành như một ngôi sao):
<svg width="600" height="400">
<mask id="svgmask2">
<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(#svgmask2)"></image>
</svg>
Thí dụ
Lớp mặt nạ SVG (được tạo thành dưới dạng vòng tròn):
<svg width="600" height="400">
<mask
id="svgmask3">
<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(#svgmask3)"></image>
</svg>
Thuộc tính tạo mặt nạ CSS
Bảng sau liệt kê tất cả các thuộc tính tạo mặt nạ CSS:
| Property | Description |
|---|---|
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |