⌘K

Thuộc tính background-blend-mode

Thuộc tính background-blend-mode thiết lập chế độ hòa trộn hình ảnh nền với màu nền hoặc các hình ảnh khác. Trong thuộc tính này cũng có thể chỉ định nhiều giá trị phân cách bằng dấu phẩy, chúng sẽ được áp dụng theo đúng thứ tự đó. Các giá trị cho thuộc tính tương tự như các chế độ chính trong phần mềm chỉnh sửa đồ họa.

Cú pháp

cssbộ-chọn {
  background-blend-mode: chế-độ;
}

Bảng dưới đây trình bày các giá trị chính cho thuộc tính background-blend-mode:

Giá trị

Giá trị Mô tả
normal Bình thường. Không sử dụng pha trộn màu sắc. Chế độ mặc định.
multiply Nhân. Trong chế độ này, giá trị màu gốc được nhân với giá trị màu phủ lên. Màu sắc kết quả luôn là một màu tối hơn.
screen Làm sáng. Trong chế độ này, các giá trị nghịch đảo của màu gốc và màu phủ lên được nhân với nhau. Màu kết quả luôn luôn là một màu sáng hơn.
overlay Phủ. Trong chế độ này, màu sắc được nhân lên hoặc làm sáng lên tùy thuộc vào màu gốc. Các hoa văn hoặc màu sắc phủ lên các điểm ảnh hiện có, giữ nguyên các vùng sáng và tối của màu gốc.

Ví dụ

Hãy xem hình ảnh sẽ trông như thế nào với giá trị mặc định của thuộc tính background-blend-mode: 

html<div id="elem"></div>
css#elem {
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ví dụ

Bây giờ hãy thay đổi giá trị thuộc tính background-blend-mode thành nhân: 

html<div id="elem"></div>
css#elem {
  background-blend-mode: multiply;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ví dụ

Hãy đặt cho hình ảnh của chúng ta chế độ làm sáng: 

html<div id="elem"></div>
css#elem {
  background-blend-mode: screen;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Xem thêm

  • thuộc tính background,
    là một thuộc tính viết tắt cho nền
  • thuộc tính background-image,
    dùng để đặt hình ảnh nền cho một khối
  • thuộc tính mix-blend-mode,
    dùng để phủ màu gốc lên hình ảnh nền
  • thuộc tính backdrop-filter,
    cho phép áp dụng các bộ lọc
BackThuộc tính backdrop-filterNextThuộc tính mix-blend-mode