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

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

Thuộc tính mix-blend-mode xác định nội dung của phần tử nên trộn như thế nào với nền của cha trực tiếp.

Xin xem thêm:

Hướng dẫn CSS:Thuộc tính background-blend-mode CSS

Mô hình

Hộp có nền màu đỏ, và hình ảnh kết hợp với hộp màu đỏ này (mờ):

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

Thử ngay

Bạn có thể tìm thấy nhiều ví dụ TIY hơn ở dưới cùng của trang.

Cú pháp CSS

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

Giá trị thuộc tính

Giá trị Mô tả
normal Đây là giá trị mặc định. Đặt chế độ trộn là thông thường.
multiply Đặt chế độ trộn là multiply.
screen Đặt chế độ trộn là screen.
overlay Đặt chế độ trộn là overlay.
darken Đặt chế độ trộn là darken.
lighten Đặt chế độ trộn là lighten.
color-dodge Đặt chế độ trộn là color-dodge.
color-burn Đặt chế độ trộn là color-burn.
difference Đặt chế độ trộn là difference.
exclusion Đặt chế độ trộn là exclusion.
hue Đặt chế độ trộn là hue.
saturation Đặt chế độ trộn là saturation.
color Đặt chế độ trộn là color.
luminosity Đặt chế độ trộn là luminosity.

Chi tiết kỹ thuật

Giá trị mặc định: normal
Kế thừa: Không
Chỉnh sửa animation: Không hỗ trợ. Vui lòng xem:Các thuộc tính liên quan đến animation.
Cú pháp JavaScript: object.style.mixBlendMode = "darken"

Các ví dụ thêm

Mô hình

Hiển thị tất cả các giá trị:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

Thử ngay

Mô hình

Sử dụng mix-blend-mode để tạo văn bản cutout/knockout tương ứng (văn bản抠图):

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

Thử ngay

Hỗ trợ trình duyệt

Số liệu trong bảng ghi chú rõ ràng về phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính đó.

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0