Bagaimana untuk mencampurkan elemen dalam CSS?-tutorial css-php.cn

Bagaimana untuk mencampurkan elemen dalam CSS?

WBOY

Lepaskan： 2023-09-14 12:13:02

ke hadapan

1517 orang telah melayarinya

Bagaimana untuk mencampurkan elemen dalam CSS?

Pengenalan

Elemen campuran dalam CSS ialah teknik yang digunakan untuk mencipta kesan visual yang menarik dan meningkatkan reka bentuk web. Menggunakan sifat campuran-campuran-mod dalam CSS, anda boleh mengawal cara elemen bercantum dengan kandungan di bawahnya. Dalam artikel ini, kami akan meneroka cara menggunakan corak adunan campuran untuk mencampur unsur dalam CSS.

Ketahui tentang campuran mod campuran

mix-blend-mode ialah sifat CSS yang membolehkan anda menetapkan mod gabungan elemen. Mod penggabungjalinan menentukan cara dua elemen digabungkan bersama, dan mod yang berbeza menghasilkan kesan visual yang berbeza.

Secara lalai, mod pengadunan elemen dalam CSS ialah Normal, yang bermaksud ia akan muncul secara normal di atas kandungan lain. Tetapi menggunakan mod adunan adunan, anda boleh menetapkan mod adunan yang berbeza untuk elemen supaya ia bercantum dengan cara tertentu dengan kandungan di bawahnya.

Terdapat pelbagai mod adunan untuk dipilih, setiap satu menghasilkan kesan unik. Berikut ialah gambaran keseluruhan beberapa mod campuran yang paling biasa digunakan -

Biasa - Mod pengadun lalai yang biasanya memaparkan elemen di atas kandungan lain
Darab- Gelapkan kandungan di bawah elemen
Skrin- Jadikan kandungan di bawah elemen lebih cerah
Tindan - Menghasilkan gabungan kesan pendaraban dan skrin
Color Dodge - Menjadikan kandungan di bawah elemen lebih ringan
Color Burn - Gelapkan kandungan di bawah elemen
Serlahkan - Hasilkan gabungan kesan pendaraban dan skrin berdasarkan kecerahan kandungan asas
Soft Light - Menghasilkan kesan yang serupa dengan memancarkan cahaya meresap pada kandungan di bawah elemen
Perbezaan - Mencipta kesan yang menyerlahkan perbezaan antara elemen dan kandungan di bawahnya
Pengecualian - Menghasilkan kesan yang serupa dengan Perbezaan, tetapi dengan kontras yang kurang
Guna Blend Blend Mode

Untuk menggunakan mod campuran-campuran pada elemen dalam CSS, anda hanya menetapkan sifat itu kepada mod adunan yang diingini. Ini adalah contoh -

.blended-element {
   mix-blend-mode: multiply;
}

Salin selepas log masuk

Kod ini menetapkan mod adunan kelas .blished-element untuk mendarab. Ini bermakna apa-apa di bawah elemen itu akan menjadi gelap.

Anda juga boleh menggunakan mod campuran-campuran pada latar belakang elemen menggunakan atribut mod campuran latar belakang. Ini membolehkan anda mencipta kesan menarik dengan imej latar belakang dan elemen lain pada halaman.

.background-element {
   background-image: url('background-image.jpg');
   background-blend-mode: screen;
}

Salin selepas log masuk

Kod menetapkan imej latar belakang kelas .background-element kepada background-image.jpg dan background-blend-mod ke skrin. Ini bermakna imej latar belakang akan dicerahkan, menghasilkan kesan pencerahan.

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Blending Elements in CSS</title>
   <style>
      .blended-element {
         background-color: #ff00ff;
         mix-blend-mode: multiply;
         width: 300px;
         height: 200px;
      }
      .background-element {
         background-image: url('background-image.jpg');
         background-size: cover;
         background-blend-mode: screen;
         width: 100%;
         height: 500px;
      }
   </style>
</head>
<body>
   <div class="blended-element">
      <h1>Blended Element</h1>
      <p>This element is using mix-blend-mode to darken the content beneath it.</p>
   </div>
   <div class="background-element">
      <h1>Background Element</h1>
      <p>This element is using background-blend-mode to lighten the background image.</p>
   </div>
</body>
</html>

Salin selepas log masuk

Arahan

Dalam contoh ini, kami telah mencipta dua elemen div. Div pertama mempunyai kelas elemen campuran dan menggunakan mod campuran-campuran: darab untuk menggelapkan kandungan di bawahnya. Div kedua mempunyai kelas elemen latar belakang dan menggunakan background-blend-mode: screen untuk menjadikan imej latar belakang lebih cerah.
Kami juga menambah beberapa penggayaan asas pada elemen menggunakan CSS. .blend-element mempunyai warna latar belakang merah jambu, manakala .background-element mempunyai set imej latar belakang untuk meliputi keseluruhan lebar dan ketinggian halaman.

Kami amat mengesyorkan pembaca untuk mencuba semua mod campuran yang disebutkan untuk memahami topik dengan lebih baik.

Petua dan Nota

Terdapat beberapa petua dan pertimbangan yang perlu diingat apabila menggunakan mod campuran-campuran -

Beri perhatian kepada kesan mod pengadunan pada kandungan teks. Mod bercampur boleh menyukarkan teks dibaca, jadi penting untuk menguji kesan pada kandungan teks sebelum melaksanakannya pada tapak web langsung.
Tidak semua pelayar menyokong semua mod pengadunan. Semak keserasian penyemak imbas sebelum menggunakan mod campuran tertentu.
Pastikan anda menguji mod campuran-campuran dalam konteks yang berbeza untuk memastikan ia menghasilkan kesan yang diingini.
Pertimbangkan untuk menggunakan mod campuran Latar Belakang dan mod adunan Campur untuk mencipta kesan visual yang kompleks.
Ringkasnya, mix-blend-mod ialah alat yang berkuasa untuk mencipta kesan visual yang menarik dalam CSS. Dengan banyak mod campuran yang tersedia, anda

Kesimpulan

Artikel ini menerangkan cara menggunakan sifat campuran-campuran-mod untuk mencampurkan elemen dalam CSS. Artikel ini memberikan gambaran keseluruhan mod gabungan dan kesannya serta menerangkan cara menggunakan atribut mod campuran-campuran pada elemen dan latar belakang HTML.

Atas ialah kandungan terperinci Bagaimana untuk mencampurkan elemen dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!