Latar-campuran-mod - Trik CSS

Anonim

Yang background-blend-modementakrifkan harta bagaimana ini elemen background-imageperlu campuran dengan mereka background-color:

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

Lihat mod pena latar belakang Pen oleh CSS-Tricks (@ css-tricks) di CodePen.

Dalam demo di atas, lalai background-imagedi sebelah kiri tidak mempunyai set mod campuran dan sehingga gambar bertindih background-color. Namun di sebelah kanan, mod campuran telah diubah background-imagedengan warna merah background-colordi bawahnya. Tetapi perhatikan bahawa warna teks tidak dipengaruhi oleh harta tambahan ini.

Nilai

  • initial: nilai lalai tanpa pengadunan.
  • inherit: mewarisi mod campuran elemen induk.
  • : nilai yang akan mengubah gambar latar bergantung pada warna latar belakangnya.

Yang nilai boleh ditetapkan sebagai mana-mana daripada yang berikut (dalam demo di bawah background-coloradalah merah):

luminosity: kecerahan warna atas dipelihara sambil menggunakan ketepuan dan rona warna latar.

Demo

Berikut adalah contoh kerja bagaimana nilai-nilai tersebut ditafsirkan bergantung pada background-color:

Lihat mod gabungan Latar Belakang Pen oleh CSS-Tricks (@ css-tricks) di CodePen.

Merantai pelbagai mod campuran

Setiap lapisan latar belakang hanya dapat memiliki mod campuran tunggal, namun jika kita menggunakan beberapa kecerunan linear misalnya, masing-masing dapat mempunyai mod campuran mereka sendiri yang menjadikan paparan menarik:

Lihat Pen Gradien dan mod latar-campuran oleh CSS-Tricks (@ css-tricks) di CodePen.

Ini dicapai dengan menyenaraikan nilai-nilai ini mengikut urutan lapisan latar belakang yang ingin anda kesan:

.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 mempunyai screenmod campuran, diikuti oleh kecerunan linier kedua yang mempunyai differencedan gambar latar pertama yang lightenberlaku padanya.

Maklumat lanjut

  • Asas Mod Campuran CSS
  • latar-campuran-mod pada MDN
  • Menyusun dan mengadun pada W3C
  • background-blend-mode di webplatform.org
  • Koleksi demo mod campuran CSS
  • Mengenal Mod Campuran CSS

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
35+ 7.1 35+ 27+ Tidak 37+ 8.1+