Background-blend-mode - Thủ thuật CSS

Các background-blend-modeđịnh nghĩa bất động sản như thế nào một phần tử background-imagenên pha trộn với nó background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Xem chế độ hòa trộn nền của Bút bằng CSS-Tricks (@ css-trick) trên CodePen.

Trong bản trình diễn ở trên, mặc định background-imageở bên trái không có chế độ hòa trộn được đặt và do đó hình ảnh chồng lên background-color. Tuy nhiên, ở bên phải, chế độ hòa trộn đã sửa đổi background-imagevới màu đỏ background-colorbên dưới. Nhưng lưu ý rằng màu văn bản không bị ảnh hưởng bởi thuộc tính bổ sung này.

Giá trị

initial: giá trị mặc định không pha trộn.
inherit: kế thừa chế độ hòa trộn của phần tử mẹ.
: một giá trị sẽ thay đổi hình nền tùy thuộc vào màu nền của nó.

Các giá trị có thể được thiết lập như bất kỳ những điều sau đây (trong demo bên dưới background-colorlà màu đỏ):

`luminosity`: độ sáng của màu trên cùng được giữ nguyên trong khi sử dụng độ bão hòa và sắc độ của màu nền.

Bản giới thiệu

Dưới đây là một ví dụ hoạt động về cách các giá trị đó được diễn giải tùy thuộc vào background-color:

Xem chế độ hòa trộn Nền bút của CSS-Tricks (@ css-trick) trên CodePen.

Chuỗi nhiều chế độ hòa trộn

Mỗi lớp nền chỉ có thể có một chế độ hòa trộn duy nhất, tuy nhiên, nếu chúng ta đang sử dụng nhiều gradient tuyến tính chẳng hạn, mỗi lớp trong số chúng có thể có chế độ hòa trộn riêng để tạo ra một màn hình thú vị:

Xem Pen Gradients và background-blend-mode của CSS-Tricks (@ css-trick) trên CodePen.

Điều này đạt được bằng cách liệt kê các giá trị này theo thứ tự của lớp nền mà bạn muốn tạo hiệu ứng:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

Gradient tuyến tính đầu tiên có screenchế độ hòa trộn, tiếp theo là gradient tuyến tính thứ hai có differencevà hình nền đầu tiên đã lightenáp dụng cho nó.