CSS Hybrid Mode menyedari kesan imej kreatif melalui ciri-ciri campuran-mod dan latar belakang-blend-mod. 1. Mix-Blend-Mode mengawal pencampuran unsur-unsur dan latar belakang, seperti menggunakan nilai perbezaan untuk membolehkan teks menembusi gambar untuk dipaparkan; 2. Latar Belakang-Blend-Mode mengawal pencampuran lapisan latar belakang, seperti nada kecerunan overlay; 3. Beri perhatian kepada keserasian pelayar apabila menggunakannya. Safari dan sokongan Chrome adalah baik, tetapi iaitu tidak menyokongnya; 4. Gunakan atribut pengasingan untuk mengelakkan gangguan hierarki dan pastikan bekas induk mempunyai sokongan kandungan untuk kesan pencampuran.

Dalam reka bentuk web, mod campuran CSS adalah alat yang berkuasa yang membolehkan imej anda menghasilkan pelbagai kesan kreatif. Ia bukan sahaja menjadikan persembahan visual lebih kaya, tetapi juga meningkatkan lapisan dan suasana halaman keseluruhan. Jika anda ingin menjadikan imej anda lebih ekspresif dan tidak mahu bergantung pada Photoshop atau perisian pemprosesan imej lain, maka mod campuran CSS patut dicuba.

Apakah mod campuran CSS?

Mod campuran CSS merujuk kepada cara di mana mix-blend-mode dan background-blend-mode digunakan untuk mengawal campuran antara unsur-unsur atau di antara lapisan latar belakang. Ringkasnya, mereka menentukan bagaimana warna berinteraksi, dengan itu mewujudkan kesan seperti "overlay", "cahaya lembut", "penapisan warna".

• mix-blend-mode : Digunakan untuk mengawal bagaimana elemen dicampur dengan kandungan di belakangnya.
• background-blend-mode : Digunakan untuk mengawal bagaimana pelbagai lapisan latar belakang elemen dicampur.

Sebagai contoh, anda boleh menanam gambar dengan warna lut untuk membentuk gaya nada tertentu, atau biarkan teks menembusi gambar dan memaparkannya.

Cara Menggunakan Mix-Blend-Mode Untuk Membuat Kesan Fusion Gambar dan Teks

Ini adalah keperluan yang sangat biasa: membuat teks kelihatan seperti "melalui" imej untuk dipaparkan. Tidak sukar dilaksanakan:

1. Sediakan bekas dengan gambar latar
2. Masukkan perenggan teks di dalam
3. Tetapkan warna dengan kontras yang tinggi (seperti putih) untuk teks
4. Kemudian tambahkan mix-blend-mode: difference; atau screen ke teks

 <div class = "blend-container">
  <H1 class = "Blend-text"> Hello World </h1>
</div>

 .Blend-Container {
  latar belakang-imej: url ('your-image.jpg');
  lebar: 100VW;
  Ketinggian: 100VH;
  Paparan: Flex;
  Justify-Content: Center;
  Align-item: pusat;
}

.Blend-text {
  saiz font: 4rem;
  Warna: Putih;
  Mix-Blend-Mode: Perbezaan;
}

Dengan cara ini, anda dapat melihat "konflik" antara teks dan gambar, membentangkan kontras visual yang kuat. Cuba nilai mod campuran yang berbeza, seperti screen , overlay , dan exclusion , dan akan ada gaya kesan yang berbeza.

Buat Gaya Overlay Gradien Dengan Latar Belakang-Mode

Sekiranya anda mahu imej mempunyai gaya penapis tertentu, seperti retro, sejuk atau hangat, anda boleh menggunakan background-blend-mode untuk mengatasi lapisan warna.

Contohnya: Jika anda mahu gambar kelihatan lebih sinematik, anda boleh melakukan ini:

1. Tetapkan gambar sebagai latar belakang
2. Tambahkan Lapisan Kecerunan Linear atau Pepejal
3. Gunakan background-blend-mode: multiply; atau overlay

 .Blend-box {
  Lebar: 100%;
  Ketinggian: 400px;
  Latar Belakang: Linear-Gradient (ke bawah, RGBA (255, 0, 0, 0.3), RGBA (0, 0, 255, 0.3)), URL ('your-photo.jpg');
  Latar Belakang-Mod: Overlay;
}

Dengan cara ini gambar akan dicelup dengan lapisan warna biru dan merah. Anda boleh menyesuaikan nilai mod warna dan campuran mod untuk membuat gaya artistik yang berbeza.

Nota dan keserasian penyemak imbas

Walaupun mod campuran CSS berkuasa, ada beberapa perkara yang perlu diperhatikan:

• Mereka disokong dengan baik di Safari dan Chrome, tetapi tidak dalam beberapa pelayar yang lebih tua seperti IE
• Apabila menggunakannya, cuba memadankan isolation: isolate; Elakkan gangguan hierarki yang tidak perlu
• Jika anda menggunakan mix-blend-mode , pastikan bekas induk mempunyai latar belakang atau kandungan yang sesuai, jika tidak, kesannya mungkin tidak dapat dilihat.

Sekiranya anda bimbang tentang keserasian, anda boleh melakukan ujian terlebih dahulu dalam projek itu, atau memberikan penyelesaian penurunan untuk penyemak imbas yang tidak disokong.

Pada dasarnya itu sahaja. Menguasai beberapa mod campuran yang biasa digunakan dan menggabungkannya dengan susun atur sebenar tempat kejadian, anda boleh dengan mudah membuat kesan visual yang mengagumkan.

Atas ialah kandungan terperinci Menggunakan mod campuran CSS untuk kesan imej kreatif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!