Thuộc tính chế độ hòa trộn nền CSS
Ví 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;
}
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 background-blend-mode
xác định chế độ hòa trộn của từng lớp nền (màu sắc và/hoặc hình ảnh).
Giá trị mặc định: | Bình 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: | đối tượng .style.backgroundBlendMode="màn hình" |
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 | Demo |
---|---|---|
normal | This is default. Sets the blending mode to normal | Demo ❯ |
multiply | Sets the blending mode to multiply | Demo ❯ |
screen | Sets the blending mode to screen | Demo ❯ |
overlay | Sets the blending mode to overlay | Demo ❯ |
darken | Sets the blending mode to darken | Demo ❯ |
lighten | Sets the blending mode to lighten | Demo ❯ |
color-dodge | Sets the blending mode to color-dodge | Demo ❯ |
saturation | Sets the blending mode to saturation | Demo ❯ |
color | Sets the blending mode to color | Demo ❯ |
luminosity | Sets the blending mode to luminosity | Demo ❯ |
Thêm ví dụ
Ví 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;
}
Hãy tự mình thử »Ví 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;
}
Hãy tự mình thử »Ví 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;
}
Hãy tự mình thử »Ví dụ
Chỉ định chế độ hòa trộn là "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;
}
Hãy tự mình thử »Ví 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;
}
Hãy tự mình thử »Ví 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;
}
Hãy tự mình thử »Ví 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;
}
Hãy tự mình thử »Ví 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;
}
Hãy tự mình thử »Ví 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;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Nền CSS