Background-blend-mode - Trik CSS

The background-blend-modemendefinisikan properti bagaimana sebuah elemen background-imageharus berbaur dengan yang background-color:

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

Lihat mode campuran latar belakang Pena oleh CSS-Trik (@ css-trick) di CodePen.

Pada demo di atas, default background-imagedi sebelah kiri tidak memiliki setelan mode campuran sehingga gambar tumpang tindih dengan background-color. Di sebelah kanan, mode campuran telah memodifikasi background-imagedengan merah di background-colorbawahnya. Namun perhatikan bahwa warna teks tidak terpengaruh oleh properti tambahan ini.

Nilai

initial: nilai default tanpa pencampuran.
inherit: mewarisi mode campuran dari elemen induk.
: nilai yang akan mengubah gambar latar belakang bergantung pada warna latar belakangnya.

The nilai dapat ditetapkan sebagai salah satu berikut (dalam demo di bawah background-colormerah):

`luminosity`: luminositas warna atas dipertahankan sementara menggunakan saturasi dan rona warna latar belakang.

Demo

Berikut adalah contoh kerja bagaimana nilai-nilai itu diinterpretasikan bergantung pada background-color:

Lihat mode campuran Latar Belakang Pena oleh CSS-Tricks (@ css-trick) di CodePen.

Merangkai beberapa mode campuran

Setiap lapisan latar belakang hanya dapat memiliki mode campuran tunggal, namun jika kita menggunakan beberapa gradien linier misalnya, masing-masing dapat memiliki mode campuran sendiri yang membuat tampilan menjadi menarik:

Lihat Gradien Pena dan mode campuran latar belakang oleh CSS-Tricks (@ css-trick) di CodePen.

Ini dicapai dengan mencantumkan nilai-nilai ini dalam urutan lapisan latar belakang yang ingin Anda beri efek:

.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; )

Gradien linier pertama memiliki screenmode campuran, diikuti oleh gradien linier kedua yang dimiliki differencedan gambar latar belakang pertama yang lightenditerapkan padanya.