Tidadigi Logo

CSS background-blend-mode Property

Thuộc tính background-blend-mode xác định cách ảnh nền hòa trộn với nhau và màu nền của phần tử.

Cú pháp: 

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


Giá trị mặc định: 

  • normal

Thuộc tính:
Normal: Đây là giá trị mặc định. Nó đặt chế độ hòa trộn thành normal.

  • Cú pháp: 
background-blend-mode: normal;
  • Ví dụ: 
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
            background-blend-mode: normal;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div id="myDIV"></div>
</body>

</html>
  • Đầu ra:

css-background-blend-mode-property

Multiply: Nó đặt chế độ hòa trộn thành multiply. Điều này dẫn đến hình ảnh tối hơn trước.

  • Cú pháp: 
background-blend-mode: multiply;
  • Ví dụ: 
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
            background-blend-mode: multiply;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div id="myDIV"></div>
</body>

</html>
  • Đầu ra: 

css-background-blend-mode-property

Screen: Nó đặt chế độ hòa trộn thành screen. Trong chế độ này, cả hình ảnh và màu sắc đều đảo ngược.

Nhân chúng lại rồi lại đảo ngược một lần nữa.

  • Cú pháp: 
background-blend-mode: screen;
  • Ví dụ: 
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
            background-blend-mode: screen;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div id="myDIV"></div>
</body>

</html>
  • Đầu ra:

css-background-blend-mode-property

Darken: Nó đặt chế độ hòa trộn thành darken. Nếu ảnh nền tối hơn màu nền, ảnh sẽ thay thế.

Ngược lại, ảnh sẽ được giữ nguyên.

  • Cú pháp: 
background-blend-mode: darken;
  • Ví dụ: 
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
            background-blend-mode: darken;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div id="myDIV"></div>
</body>

</html>
  • Đầu ra:

css-background-blend-mode-property

Lighten: Nó đặt chế độ hòa trộn thành lighten. Nếu ảnh nền sáng hơn màu nền, ảnh sẽ thay thế.

Ngược lại, ảnh sẽ được giữ nguyên.

  • Cú pháp: 
background-blend-mode: lighten;
  • Ví dụ: 
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
            background-blend-mode: lighten;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div id="myDIV"></div>
</body>

</html>
  • Đầu ra:

css-background-blend-mode-property

Color-Dodge: Nó đặt chế độ hòa trộn thành color-dodge. Màu nền được chia cho nghịch đảo của ảnh nền.

Điều này rất giống với chế độ hòa trộn screen.

  • Cú pháp: 
background-blend-mode: color-dodge;
  • Ví dụ: 
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
            background-blend-mode: color-dodge;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div id="myDIV"></div>
</body>

</html>
  • Đầu ra:

css-background-blend-mode-property


Saturation: Nó đặt chế độ hòa trộn thành lighten. Chế độ này giữ độ bão hòa của ảnh nền.

Đồng thời trộn màu sắc và độ sáng của màu nền.

  • Cú pháp: 
background-blend-mode: saturation;
  • Ví dụ: 
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
            background-blend-mode: saturation;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div id="myDIV"></div>
</body>

</html>
  • Đầu ra:

css-background-blend-mode-property

Difference: Nó đặt chế độ hòa trộn thành difference. Chế độ này cho kết quả bằng cách trừ màu tối hơn.

Ảnh nền và màu nền từ màu sáng nhất. Thường thì hình ảnh sẽ có độ tương phản rất cao.

  • Cú pháp: 
background-blend-mode: difference;
  • Ví dụ: 
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
            background-blend-mode: difference;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div id="myDIV"></div>
</body>

</html>
  • Đầu ra:

css-background-blend-mode-property

Luminosity: Nó đặt chế độ hòa trộn thành luminosity. Trong chế độ này, độ sáng của màu trên cùng được giữ lại.

Đồng thời sử dụng độ bão hòa và màu sắc của màu nền.

  • Cú pháp: 
background-blend-mode: luminosity;
  • Ví dụ: 
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
            background-blend-mode: luminosity;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div id="myDIV"></div>
</body>

</html>
  • Đầu ra:

css-background-blend-mode-property

Overlay: Nó đặt chế độ hòa trộn thành overlay. Trong chế độ này, màu nền được trộn với ảnh nền.

Để phản ánh độ sáng hoặc tối của phông nền.

  • Cú pháp: 
background-blend-mode: Overlay;
  • Ví dụ: 
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>background-blend-mode Property</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;
            background-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
            background-blend-mode: overlay;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div id="myDIV"></div>
</body>

</html>
  • Đầu ra:

css-background-blend-mode-property

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi thuộc tính background-blend-mode được liệt kê dưới đây:

  • Google Chrome 35.0
  • Edge 79.0
  • Firefox 30.0
  • Opera 22.0
  • Apple Safari 8.0

Last Updated : 21/07/2025