Thuộc tính gốc mặt nạ CSS
Thí dụ
Sử dụng mask-origin: border-box;
và mask-origin:
content-box;
:
.mask1 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding:
50px;
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: border-box;
mask-origin: border-box;
}
.mask2 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image:
url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size:
80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: content-box;
mask-origin: content-box;
}
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-origin
tính chỉ định vị trí gốc (khu vực vị trí mặt nạ) của hình ảnh lớp mặt nạ.
Giá trị mặc định: | hộp viền |
---|---|
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: | object .style.maskOrigin = "padding-box" |
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-origin | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Cú pháp CSS
mask-origin:
border-box|content-box|padding-box|margin-box|fill-box|stroke-box|view-box|initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
border-box | The position is relative to the border box. This is default |
content-box | The position is relative to the content box |
padding-box | The position is relative to the padding box |
margin-box | The position is relative to the margin box |
fill-box | The position is relative to the object bounding box |
stroke-box | The position is relative to the stroke bounding box |
view-box | Use the nearest SVG viewport as reference box |
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ụ
Sử dụng mask-origin: border-box;
và mask-origin:
content-box;
:
.mask1 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding:
50px;
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: border-box;
mask-origin: border-box;
}
.mask2 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image:
url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size:
80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: content-box;
mask-origin: content-box;
}
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-position
Tham chiếu CSS: thuộc tính mask-repeat
Tham chiếu CSS: thuộc tính mask-size
Hướng dẫn CSS: CSS Masking