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

Bùi Tấn Lực
150
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:

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ử

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

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

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

Đă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

Kiến thức CSS

Kiến thức HTML

Kiến thức PHP

Kiến thức MySQL

Kiến thức JavaScript

Kiến thức về website

Kiến thức SEO website