background-blend-mode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

Các chế độ pha trộn phải được khai báo theo cùng thứ tự như thuộc tính background-image. Nếu độ dài danh sách chế độ pha trộn và ảnh nền không bằng nhau, danh sách sẽ được lặp lại và/hoặc cắt bớt cho đến khi độ dài khớp nhau.

Try it

background-blend-mode: normal;

background-blend-mode: multiply;

background-blend-mode: hard-light;

background-blend-mode: difference;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element"></div>
  </div>
</section>

#example-element {
  background-color: green;
  background-image: url("/shared-assets/images/examples/balloon.jpg");
  width: 250px;
  height: 305px;
}

Cú pháp

css

/* Một giá trị */
background-blend-mode: normal;

/* Hai giá trị, một cho mỗi ảnh nền */
background-blend-mode: darken, luminosity;

/* Giá trị toàn cục */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;

Giá trị

<blend-mode>: Chế độ pha trộn được áp dụng. Có thể có nhiều giá trị, phân cách bằng dấu phẩy.

Định nghĩa hình thức

Initial value	`normal`
Applies to	All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to `::first-letter` and `::first-line`.
Inherited	no
Computed value	as specified
Animation type	Not animatable

Cú pháp hình thức

background-blend-mode = 
  <'mix-blend-mode'>#  

<mix-blend-mode> = 
  <blend-mode>  |
  plus-lighter  

<blend-mode> = 
  normal       |
  darken       |
  multiply     |
  color-burn   |
  lighten      |
  screen       |
  color-dodge  |
  overlay      |
  soft-light   |
  hard-light   |
  difference   |
  exclusion    |
  hue          |
  saturation   |
  color        |
  luminosity

Ví dụ

Ví dụ cơ bản

css

.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}

Thử các chế độ pha trộn khác nhau

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}

document.getElementById("select").onchange = (event) => {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));

Đặc tả

Specification
Compositing and Blending Module Level 2 # background-blend-mode

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content