Mặt nạ CSS
Với tính năng che CSS, bạn tạo một lớp mặt nạ để đặt lê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 hình ảnh mặt nạ CSS
Thuộc tính mask-image CSS chỉ định 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, CSS gradient 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 mặt nạ CSS. 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 số trong bảng bên dưới 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 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 phải có vùng trong suốt hoặc bán trong suốt. Màu đen biểu thị 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, Ý:
Ví 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;
} Hãy tự mình thử »Ví dụ giải thích
Thuộc tính mask-image chỉ định hình ảnh sẽ được sử dụng làm lớp mặt nạ cho một phần tử.
Thuộc tính mask-repeat chỉ định xem hình ảnh mặt nạ có được lặp lại hay không hoặc như thế nào. Giá trị no-repeat cho biết 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 ta bỏ qua thuộc tính mask-repeat , hình ảnh mặt nạ sẽ được lặp lại trên toàn bộ hình ảnh từ Cinque Terre, Ý:
Ví dụ
Đây là mã nguồn:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
} Hãy tự mình thử » Sử dụng gradient làm lớp mặt nạ
Độ dốc tuyến tính và xuyên tâm CSS cũng có thể được sử dụng làm hình ảnh mặt nạ.
Ví dụ về độ dốc tuyến tính
Ở đây, chúng tôi sử dụng gradient tuyến tính làm lớp mặt nạ cho hình ảnh của mình. Độ dốc tuyến tính này đi từ trên cùng (đen) xuống dưới cùng (trong suốt):
Ví dụ
Sử dụng 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);
} Hãy tự mình thử »Ở đây, chúng tôi sử dụng 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 mình:
Cinque Terre là một khu vực ven biển thuộc Liguria, phía tây bắc nước Ý. 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 thuộc Liguria, phía tây bắc nước Ý. 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 thuộc Liguria, phía tây bắc nước Ý. 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.
Ví dụ
Sử dụng 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);
} Hãy tự mình thử »Ví dụ về độ dốc xuyên tâm
Ở đây, chúng tôi sử dụng gradient xuyên tâm (có hình tròn) làm lớp mặt nạ cho hình ảnh của mình:
Ví dụ
Sử dụng 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%);
} Hãy tự mình thử »Ở đây, chúng tôi sử dụng gradient xuyên tâm (có hình elip) làm lớp mặt nạ cho hình ảnh của mình:
Ví 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) 50%);
} Hãy tự mình thử »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 mình:
Ví dụ
Lớp mặt nạ SVG (có dạng 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="https://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg> Hãy tự mình thử » Ví dụ
Lớp mặt nạ SVG (được tạo thành hình 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="https://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg> Hãy tự mình thử » Ví dụ
Lớp mặt nạ SVG (được tạo thành hình 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="https://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg> Hãy tự mình thử »Thuộc tính mặt nạ CSS
Bảng sau liệt kê tất cả các thuộc tính 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 |
