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

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

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:

background-blend-mode: lighten;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-blend-mode lighten trong CSS</title>
<style>
#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");
}
</style>
</head>
<body>

<h1>Thuộc tính background-blend-mode lighten trong CSS</h1>
<p>Hòa trộn giữa các hình nền bằng cách làm sáng:</p>
<div id="divid" style="background-blend-mode: lighten;"></div>

</body>
</html>

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:

background-blend-mode: multiply;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-blend-mode multiply trong CSS</title>
<style>
#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");
}
</style>
</head>
<body>

<h1>Thuộc tính background-blend-mode multiply trong CSS</h1>
<p>Hòa trộn giữa các hình nền với chế độ multiply:</p>
<div id="divid" style="background-blend-mode: multiply;"></div>

</body>
</html>

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:

background-blend-mode: screen;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-blend-mode screen trong CSS</title>
<style>
#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");
}
</style>
</head>
<body>

<h1>Thuộc tính background-blend-mode screen trong CSS</h1>
<p>Hòa trộn giữa các hình nền với chế độ screen:</p>
<div id="divid" style="background-blend-mode: screen;"></div>

</body>
</html>

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:

background-blend-mode: overlay;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-blend-mode overlay trong CSS</title>
<style>
#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");
}
</style>
</head>
<body>

<h1>Thuộc tính background-blend-mode overlay trong CSS</h1>
<p>Hòa trộn giữa các hình nền với chế độ overlay:</p>
<div id="divid" style="background-blend-mode: overlay;"></div>

</body>
</html>

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:

background-blend-mode: darken;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-blend-mode darken trong CSS</title>
<style>
#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");
}
</style>
</head>
<body>

<h1>Thuộc tính background-blend-mode darken trong CSS</h1>
<p>Hòa trộn giữa các hình nền với chế độ darken:</p>
<div id="divid" style="background-blend-mode: darken;"></div>

</body>
</html>

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:

background-blend-mode: color-dodge;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-blend-mode color-dodge trong CSS</title>
<style>
#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");
}
</style>
</head>
<body>

<h1>Thuộc tính background-blend-mode color-dodge trong CSS</h1>
<p>Hòa trộn giữa các hình nền với chế độ color-dodge:</p>
<div id="divid" style="background-blend-mode: color-dodge;"></div>

</body>
</html>

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:

background-blend-mode: saturation;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-blend-mode saturation trong CSS</title>
<style>
#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");
}
</style>
</head>
<body>

<h1>Thuộc tính background-blend-mode saturation trong CSS</h1>
<p>Hòa trộn giữa các hình nền với chế độ saturation:</p>
<div id="divid" style="background-blend-mode: saturation;"></div>

</body>
</html>

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:

background-blend-mode: color;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-blend-mode color trong CSS</title>
<style>
#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");
}
</style>
</head>
<body>

<h1>Thuộc tính background-blend-mode color trong CSS</h1>
<p>Hòa trộn giữa các hình nền với chế độ color:</p>
<div id="divid" style="background-blend-mode: color;"></div>

</body>
</html>

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:

background-blend-mode: luminosity;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-blend-mode luminosity trong CSS</title>
<style>
#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");
}
</style>
</head>
<body>

<h1>Thuộc tính background-blend-mode luminosity trong CSS</h1>
<p>Hòa trộn giữa các hình nền với chế độ luminosity:</p>
<div id="divid" style="background-blend-mode: luminosity;"></div>

</body>
</html>

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:

background-blend-mode: normal;

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-blend-mode normal trong CSS</title>
<style>
#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");
}
</style>
</head>
<body>

<h1>Thuộc tính background-blend-mode normal trong CSS</h1>
<p>Hòa trộn giữa các hình nền với chế độ normal:</p>
<div id="divid" style="background-blend-mode: normal;"></div>

</body>
</html>

Chạy thử

Ứng dụng background-blend-mode trong thiết kế giao diện Web

background-blend-mode phù hợp khi cần tạo hiệu ứng màu sắc trực tiếp trên nền mà không phải thêm nhiều phần tử HTML. Thuộc tính này đặc biệt hữu ích với banner, ảnh tiêu đề, khối giới thiệu hoặc các khu vực cần tạo điểm nhấn bằng hình ảnh kết hợp màu nền.

Tạo lớp phủ màu cho hình ảnh nền

Một ảnh nền đôi khi có màu sắc quá sáng hoặc không đồng nhất khiến chữ phía trên khó đọc. Có thể kết hợp màu nền với background-blend-mode để tạo lớp màu phủ lên ảnh, đồng thời vẫn giữ được các chi tiết chính của hình ảnh.

<div class="banner">Khám phá Web Mới</div>

.banner {
    background-image: url("banner.jpg");
    background-color: rgba(20, 60, 100, 0.7);
    background-blend-mode: multiply;
}

Cách làm này giúp thay đổi cảm nhận về ảnh mà không cần chỉnh sửa trực tiếp file hình. Khi thay đổi background-color hoặc chế độ hòa trộn, cùng một hình nền có thể tạo ra nhiều phong cách khác nhau.

Kết hợp hình ảnh với gradient để làm nổi bật nội dung

Kết hợp gradient với hình nền là một cách hiệu quả để tạo vùng chuyển màu phía sau nội dung. Gradient có thể làm nền tối dần ở một phía, giúp tiêu đề và đoạn mô tả dễ đọc hơn mà vẫn giữ được hình ảnh làm điểm nhấn.

<section class="hero">
    <h2>Thiết kế giao diện hiện đại</h2>
    <p>Tạo điểm nhấn trực quan bằng CSS.</p>
</section>

.hero {
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.75), transparent),
        url("hero.jpg");
    background-blend-mode: normal;
}

Ưu điểm của phương pháp này là có thể kiểm soát riêng hướng chuyển màu, mức độ trong suốt và hình nền. Nhờ đó, phần nội dung phía trước vẫn nổi bật mà không cần chèn thêm một lớp phủ bằng HTML.

Tạo hiệu ứng màu sắc cho nhiều lớp background

background-blend-mode cũng có thể phát huy hiệu quả khi một phần tử sử dụng nhiều lớp nền. Mỗi lớp có thể đảm nhận một vai trò khác nhau, chẳng hạn một lớp tạo màu, một lớp tạo vùng sáng tối và một lớp chứa hình ảnh.

.card {
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent),
        url("card-image.jpg");
    background-color: #315a78;
    background-blend-mode: screen, multiply;
}

Cách phối hợp nhiều lớp giúp tạo hiệu ứng phong phú mà CSS vẫn giữ cấu trúc gọn gàng. Tuy nhiên, nên giới hạn số lớp và chọn chế độ hòa trộn có chủ đích để màu sắc không trở nên quá rối hoặc làm giảm khả năng đọc nội dung.

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.

★★★★★ ★★★★★
5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ

Đánh giá

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 *

Bình luận, Hỏi đáp

Yêu Cầu Báo Giá

Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !