Thuộc tính nền CSS pha trộn chế độ
Thí dụ
Chỉ định chế độ hòa trộn của ảnh nền là "làm sáng":
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
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 background-blend-mode
tính xác định chế độ hòa trộn của mỗi lớp nền (màu và / hoặc hình ảnh).
Giá trị mặc định: | thông thườ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: | object .style.backgroundBlendMode = "screen" |
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.
Property | |||||
---|---|---|---|---|---|
background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
Cú pháp CSS
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
normal | This is default. Sets the blending mode to normal | |
multiply | Sets the blending mode to multiply | |
screen | Sets the blending mode to screen | |
overlay | Sets the blending mode to overlay | |
darken | Sets the blending mode to darken | |
lighten | Sets the blending mode to lighten | |
color-dodge | Sets the blending mode to color-dodge | |
saturation | Sets the blending mode to saturation | |
color | Sets the blending mode to color | |
luminosity | Sets the blending mode to luminosity |
Các ví dụ khác
Thí dụ
Chỉ định chế độ hòa trộn là "nhân":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
Thí dụ
Chỉ định chế độ hòa trộn là "màn hình":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
Thí dụ
Chỉ định chế độ hòa trộn là "lớp phủ":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
Thí dụ
Chỉ định chế độ hòa trộn được "làm tối":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
Thí dụ
Chỉ định chế độ hòa trộn là "color-dodge":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}
Thí dụ
Chỉ định chế độ hòa trộn là "bão hòa":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
Thí dụ
Chỉ định chế độ hòa trộn là "màu":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
Thí dụ
Chỉ định chế độ hòa trộn là "độ sáng":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
Thí dụ
Chỉ định chế độ hòa trộn là "bình thường":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
Các trang liên quan
Hướng dẫn CSS: Nền CSS