Thuộc tính kích thước mặt nạ CSS
Thí dụ
Đặt kích thước (tính bằng phần trăm) cho hình ảnh lớp mặt nạ:
.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-size
tính chỉ định kích thước của hình ảnh lớp mặt nạ.
Giá trị mặc định: | Tự động |
---|---|
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.maskSize = "100px 200px" |
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: auto|size|contain|cover|initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
auto | This is default |
size | Specifies the size of the mask image in px, em, etc, or in % |
contain | Scales the mask image in a way that both its width and its height fit inside the container |
cover | Scales the mask image in a way that both its width and its height cover the container |
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 kích thước (tính bằng pixel) cho hình ảnh lớp mặt nạ:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 200px 200px;
mask-size: 200px 200px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Các trang liên quan
Tham chiếu CSS: thuộc tính mask-image
Tham chiếu CSS: thuộc tính mask-mode
Tham chiếu CSS: thuộc tính mask-origin
Tham chiếu CSS: thuộc tính mask-position
Tham chiếu CSS: thuộc tính mask-repeat
Hướng dẫn CSS: CSS Masking