Thuộc tính kích thước mặt nạ CSS
Ví dụ
Đặt kích thước (tính theo 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;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính mask-size
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-size | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Cú pháp CSS
mask-size: 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 |
Thêm ví dụ
Ví 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;
}
Hãy tự mình thử »Trang liên quan
Tham chiếu CSS: thuộc tính hình ảnh mặt nạ
Tham chiếu CSS: thuộc tính chế độ mặt nạ
Tham chiếu CSS: thuộc tính mặt nạ gốc
Tham chiếu CSS: thuộc tính vị trí mặt nạ
Tham chiếu CSS: thuộc tính lặp lại mặt nạ
Hướng dẫn CSS: Mặt nạ CSS