Thuộc tính background-blend-mode CSS

Định nghĩa và cách sử dụng

background-blend-mode Thuộc tính định nghĩa chế độ trộn của mỗi lớp nền (màu và/hoặc hình ảnh).

Xem thêm:

Giáo trình CSS:BGCSS

Mô hình

Đặt chế độ trộn của hình ảnh nền là "lighten" (tăng sáng):

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

Thử ngay

Bạn có thể xem thêm các ví dụ TIY ở cuối trang.

Ngữ pháp CSS

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Giá trị thuộc tính

Giá trị Mô tả
normal Mặc định. Đặt chế độ trộn là thông thường.
multiply Đặt chế độ trộn là multiply (nhân).
screen Đặt chế độ trộn là screen (màn hình).
overlay Đặt chế độ trộn là overlay (bài trí lên).
darken Đặt chế độ trộn là overlay (bài trí lên).
lighten Đặt chế độ trộn là lighten (tăng sáng).
color-dodge Set the blend mode to color-dodge (color fade).
saturation Set the blend mode to saturation (saturation).
color Set the blend mode to color (color).
luminosity Set the blend mode to luminosity (brightness).

Technical details

Default value: normal
Inheritance: No
Animation creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.backgroundBlendMode="screen"

More examples

Mô hình

Chỉ định chế độ trộn là "multiply":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

Thử ngay

Mô hình

Chỉ định chế độ trộn là "screen":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

Thử ngay

Mô hình

Chỉ định chế độ trộn là "overlay":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

Thử ngay

Mô hình

Chỉ định chế độ trộn là "darken":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

Thử ngay

Mô hình

Chỉ định chế độ 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ử ngay

Mô hình

Chỉ định chế độ trộn là "saturation":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

Thử ngay

Mô hình

Chỉ định chế độ trộn là "color":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

Thử ngay

Mô hình

Chỉ định chế độ trộn là "luminosity":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

Thử ngay

Mô hình

Chỉ định chế độ trộn là "normal":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

Thử ngay

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome Edge Firefox Safari Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1