Thuộc tính mask
Thuộc tính mask là một thuộc tính viết tắt cho tất cả các thuộc tính mặt nạ và cho phép thiết lập:
hình ảnh mặt nạ, vị trí, kích thước, chế độ hòa trộn và các tham số khác.
Là thuộc tính viết tắt cho các thuộc tính sau:
mask-image,
mask-position,
mask-size,
mask-repeat,
mask-origin,
mask-clip,
mask-mode,
mask-composite.
Cú pháp
selector {
mask: [mask-image] [mask-position] / [mask-size]
[mask-repeat] [mask-origin] [mask-clip]
[mask-mode] [mask-composite];
}
Giá trị
| Giá trị | Mô tả |
|---|---|
none |
Tắt mặt nạ (giá trị mặc định) |
url() |
Đường dẫn đến hình ảnh mặt nạ (SVG, PNG) |
linear-gradient() |
Gradient tuyến tính làm mặt nạ |
radial-gradient() |
Gradient xuyên tâm làm mặt nạ |
position |
Vị trí mặt nạ (top, center, 50% 50%, v.v.) |
size |
Kích thước mặt nạ (cover, contain, 100px 50px) |
repeat |
Lặp lại mặt nạ (no-repeat, repeat-x, space) |
mode |
Chế độ hòa trộn (alpha, luminance, match-source) |
composite |
Tổ hợp mặt nạ (add, subtract, intersect, exclude) |
Chuẩn bị hình ảnh
Giả sử chúng ta có một hình ảnh thiên nhiên mà chúng ta sẽ cắt, và các hình ảnh SVG trái tim và mũi tên, theo đó chúng ta sẽ cắt:
<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">
:
Ví dụ . Mặt nạ hình ảnh
Hãy đặt mặt nạ hình trái tim lên hình ảnh của chúng ta:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
background: red;
mask: url("heart.svg") center/300px no-repeat;
}
:
Ví dụ . Vị trí mặt nạ
Mặt nạ hình trái tim ở góc trên bên trái:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left top/150px no-repeat;
}
:
Ví dụ . Vị trí mặt nạ
Mặt nạ hình trái tim ở góc dưới bên phải:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") right bottom/150px no-repeat;
}
:
Ví dụ . Vị trí mặt nạ
Mặt nạ hình trái tim ở giữa bên trái:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center/150px no-repeat;
}
:
Ví dụ . Vị trí mặt nạ
Mặt nạ hình trái tim ở chính giữa:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/150px no-repeat;
}
:
Ví dụ . Vị trí mặt nạ
Mặt nạ hình trái tim cách 100px từ trái và 200px từ trên:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") 100px 200px /150px no-repeat;
}
:
Ví dụ . Kích thước mặt nạ cover
Giá trị cover phóng to mặt nạ để nó phủ hoàn toàn phần tử, giữ nguyên tỷ lệ.
Có thể cắt các cạnh của mặt nạ nếu tỷ lệ không khớp:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/cover;
}
:
Ví dụ . Kích thước mặt nạ contain
Giá trị contain phóng to mặt nạ để nó vừa hoàn toàn trong phần tử,
giữ nguyên tỷ lệ. Có thể để lại các vùng trống:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/contain no-repeat;
}
:
Ví dụ . Kích thước mặt nạ
Kích thước cố định thiết lập kích thước chính xác cho mặt nạ.
Ví dụ, hãy tạo mặt nạ có kích thước 50px:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/50px no-repeat;
}
:
Ví dụ . Lặp lại no-repeat
Giá trị no-repeat tắt lặp lại mặt nạ.
Mặt nạ chỉ hiển thị một lần tại vị trí được chỉ định:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") top left / 150px no-repeat;
}
:
Ví dụ . Lặp lại repeat-x
Giá trị repeat-x lặp lại mặt nạ chỉ theo trục ngang:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center / 50px repeat-x;
}
:
Ví dụ . Tổ hợp add
Giá trị add cộng nhiều mặt nạ (kết quả - hợp của tất cả các mặt nạ):
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 200px 30px / 150px no-repeat;
mask-composite: add;
}
:
Ví dụ . Tổ hợp intersect
Giá trị intersect chỉ hiển thị vùng giao nhau của các mặt nạ:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 50px 30px / 150px no-repeat;
mask-composite: intersect;
}
:
Ví dụ . Tổ hợp exclude
Giá trị exclude hiển thị các vùng mặt nạ không giao nhau:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 50px 30px / 150px no-repeat;
mask-composite: exclude;
}
:
Ví dụ . Tổ hợp subtract
Giá trị subtract trừ mặt nạ thứ hai ra khỏi mặt nạ đầu tiên.
Ví dụ, hãy tạo một trái tim và trừ đi
mũi tên từ nó:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 250px no-repeat,
url("arrow.svg") 170px 80px / 120px no-repeat;
mask-composite: subtract;
}
:
Ví dụ . Ghi dài thuộc tính mask
Thuộc tính mask, được viết bằng các thành phần riêng biệt:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-origin: content-box;
mask-clip: content-box;
mask-mode: alpha;
mask-composite: add;
}
:
Ví dụ . SVG cho hình ảnh
Sử dụng phần tử SVG làm mặt nạ cho hình ảnh:
<img id="image" src="image.jpg">
<svg width="0" height="0">
<mask id="mask">
<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
</mask>
</svg>
#image {
width: 500px;
height: 281px;
background: red;
mask: url(#mask);
}
:
Ví dụ . SVG cho gradient
Sử dụng phần tử SVG làm mặt nạ cho gradient:
<div id="elem"></div>
<svg width="0" height="0">
<mask id="star-mask">
<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
</mask>
</svg>
#elem {
width: 500px;
height: 300px;
background: linear-gradient(45deg, red, blue);
mask: url(#star-mask);
}
:
Xem thêm
-
thuộc tính
mask-position,
xác định vị trí của mặt nạ so với phần tử -
thuộc tính
mask-image,
thiết lập hình ảnh cho mặt nạ -
thuộc tính
mask-mode,
xác định cách mặt nạ tương tác với nền -
thuộc tính
mask-size,
xác định kích thước mặt nạ -
thuộc tính
mask-repeat,
xác định việc lặp lại mặt nạ -
thuộc tính
mask-origin,
xác định vùng định vị mặt nạ -
thuộc tính
mask-clip,
xác định vùng cắt mặt nạ -
thuộc tính
mask-composite,
xác định cách nhiều mặt nạ được kết hợp
