Ketelusan CSS dan mod pengadunan: tambahkan ketelusan dan kesan pengadunan pada elemen web

mod ketelusan dan pengadunan CSS: Tambahkan kesan ketelusan dan gabungan pada elemen web, contoh kod khusus diperlukan

Dalam reka bentuk web moden, kami Selalunya perlu menambah kesan ketelusan dan gabungan pada elemen halaman web untuk menunjukkan reka bentuk dan kesan visual yang lebih unik. CSS menyediakan satu siri sifat dan ciri untuk mencapai kesan ini. Artikel ini akan menerangkan cara menggunakan CSS untuk menambah kesan ketelusan dan gabungan pada elemen halaman web dan menyediakan beberapa contoh kod praktikal.

1. CSS transparency

Transparency merujuk kepada kelegapan elemen web, yang boleh dikawal dengan menetapkan atribut kelegapan elemen. Atribut kelegapan boleh mengambil nilai antara 0 dan 1, 0 bermaksud telus sepenuhnya, dan 1 bermaksud legap sepenuhnya.

Sebagai contoh, kod berikut boleh menetapkan ketelusan elemen div kepada 50%:

div {
  opacity: 0.5;
}

Selain menggunakan atribut kelegapan, kita juga boleh menggunakan nilai warna RGBA untuk mencapai kesan ketelusan. Nilai warna RGBA terdiri daripada tiga nilai warna: merah, hijau dan biru dan nilai ketelusan juga berjulat dari 0 hingga 1.

Sebagai contoh, kod berikut boleh menetapkan warna latar belakang elemen div kepada merah dan menetapkan ketelusan kepada 50%:

div {
  background-color: rgba(255, 0, 0, 0.5);
}

2. Mod Campuran CSS# 🎜 🎜#

Mod pengadunan merujuk kepada menukar rupa dan kesan paparan dengan mencampurkan tahap warna dan imej yang berbeza. Dalam CSS, kita boleh menggunakan atribut mod campuran-campuran untuk mencapai kesan mod campuran. Sifat ini boleh digunakan pada mana-mana elemen dengan warna latar belakang atau imej.

Terdapat banyak mod adunan yang biasa digunakan, termasuk normal, tindanan, perbezaan, dsb. Mod pencampuran yang berbeza akan mempunyai kesan yang berbeza, sila pilih mod pencampuran yang sesuai mengikut keperluan sebenar.

Sebagai contoh, kod berikut boleh menetapkan mod gabungan elemen div kepada tindanan:

div {
  mix-blend-mode: overlay;
}

Selain menggunakan atribut campuran-campuran-mod, kita juga boleh gunakan atribut penapis CSS untuk Mencapai kesan gabungan yang lebih kompleks. Atribut penapis boleh menggunakan pelbagai kesan penapis, termasuk kabur, kecerahan, kontras, dsb.

Sebagai contoh, kod berikut boleh menggunakan kesan penapis kabur dan kecerahan pada elemen imej:

img {
  filter: blur(5px) brightness(150%);
}

Perlu diperhatikan bahawa mod campuran CSS dan kesan penapis berfungsi secara berbeza dalam berbeza pelayar Tahap sokongan berbeza-beza, sila jalankan ujian keserasian semasa pembangunan sebenar.

Ringkasan:

Dengan menggunakan mod ketelusan dan pengadunan CSS, kami boleh menambah ketelusan unik dan kesan gabungan pada elemen halaman web untuk mencapai pengalaman visual yang lebih kaya. Artikel ini menerangkan cara menggunakan sifat kelegapan dan nilai warna RGBA untuk menetapkan ketelusan, dan cara menggunakan sifat mod campuran-campuran dan sifat penapis untuk mencapai kesan mod gabungan. Saya harap kandungan di atas akan membantu amalan anda dalam reka bentuk web.

Atas ialah kandungan terperinci Ketelusan CSS dan mod pengadunan: tambahkan ketelusan dan kesan pengadunan pada elemen web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!