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

• Bùi Tấn Lực
• 24
• 05/10/2025

Thuộc tính background-blend-mode trong CSS dùng để hòa trộn giữa các hình nền trên phần tử HTML bằng các chế độ màu khác nhau, chi tiết như nào hãy cùng chúng tôi phân tích:

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

Chức năng của Thuộc tính background-blend-mode trong CSS

Thuộc tính background-blend-mode trong CSS dùng để hòa trộn giữa các hình nền trên phần tử HTML bằng các chế độ màu khác nhau.

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

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

Hòa trộn giữa các hình nền bằng cách làm sáng:

#divid {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-blend-mode: lighten;
}

Chạy Thử

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

Hòa trộn giữa các hình nền với chế độ multiply:

#divid {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-blend-mode: multiply;
}

Chạy Thử

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

Hòa trộn giữa các hình nền với chế độ screen:

#divid {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-blend-mode: screen;
}

Chạy Thử

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

Hòa trộn giữa các hình nền với chế độ overlay:

#divid {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-blend-mode: overlay;
}

Chạy Thử

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

Hòa trộn giữa các hình nền với chế độ darken:

#divid {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-blend-mode: darken;
}

Chạy Thử

Thuộc tính background-blend-mode color-dodge trong CSS

Hòa trộn giữa các hình nền với chế độ color-dodge:

#divid {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-blend-mode: color-dodge;
}

Chạy Thử

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

Hòa trộn giữa các hình nền với chế độ saturation:

#divid {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-blend-mode: saturation;
}

Chạy Thử

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

Hòa trộn giữa các hình nền với chế độ color:

#divid {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-blend-mode: color;
}

Chạy Thử

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

Hòa trộn giữa các hình nền với chế độ luminosity:

#divid {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-blend-mode: luminosity;
}

Chạy Thử

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

Hòa trộn giữa các hình nền với chế độ normal:

#divid {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-blend-mode: normal;
}

Chạy thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính background-blend-mode trong CSS.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thuộc tính background-blend-mode trong CSS
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn