Petua pengoptimuman sifat kaca beku CSS: penapis dan penapis latar

Kemahiran pengoptimuman atribut kaca beku CSS: penapis dan penapis latar belakang

Dalam reka bentuk web moden, kesan kaca beku (Blur) digunakan secara meluas dalam latar belakang atau gambar beberapa elemen antara muka untuk memberikan penglihatan yang kabur dan lembut. Kesan. Pada masa lalu, cara utama untuk mencapai kesan kaca beku ialah menggunakan perisian pemprosesan imej untuk mengaburkan imej, dan kemudian menggunakan imej kabur sebagai latar belakang. Walau bagaimanapun, kaedah ini memerlukan sumber imej tambahan dan tidak boleh melaraskan tahap kesan kabur secara dinamik. Dengan pembangunan CSS3, kami boleh mencapai kesan kaca beku dinamik melalui sifat CSS tanpa sumber imej tambahan.

Penapis sifat CSS dan penapis latar belakang boleh digunakan untuk mencapai kesan kaca beku, dan ia sesuai untuk adegan yang berbeza. Atribut penapis digunakan untuk menapis kandungan elemen, manakala atribut penapis latar belakang boleh menapis latar belakang elemen. Di bawah ini kami akan memperkenalkan kedua-dua sifat ini secara terperinci dan memberikan contoh kod khusus.

1. Atribut penapis

Atribut penapis ialah penapis umum yang boleh digunakan pada kandungan elemen, termasuk teks, imej, dsb. Gunakan atribut ini untuk mencapai kekaburan, pelarasan kecerahan, pelarasan kontras, pelarasan tepu dan kesan lain pada kandungan elemen. Antaranya, kesan kabur boleh digunakan untuk mencapai kesan kaca beku.

1. Kesan kabur

Untuk mencapai kesan kabur, anda boleh menetapkan nilai atribut penapis kepada kabur(nilai), di mana nilai mewakili tahap kabur. Secara umumnya, julat nilai ialah 0~10px Semakin besar nilai, semakin tinggi tahap kekaburan.

.blur-effect {
  filter: blur(5px);
}

2. Pelarasan kecerahan

Jika anda ingin melaraskan kecerahan kandungan elemen, anda boleh menggunakan atribut brightness(value). Nilai sifat ini ialah peratusan, dengan nilai 100% mewakili kecerahan asal, nilai kurang daripada 100% mewakili kecerahan berkurangan dan nilai lebih besar daripada 100% mewakili kecerahan yang meningkat.

.brightness-effect {
  filter: brightness(80%);
}

3. Pelarasan kontras

Untuk melaraskan kontras kandungan unsur, anda boleh menggunakan atribut kontras(nilai). Nilai sifat ini juga merupakan peratusan, dengan nilai 100% mewakili kontras asal, nilai kurang daripada 100% mewakili kontras yang dikurangkan dan nilai yang lebih besar daripada 100% mewakili kontras yang meningkat.

.contrast-effect {
  filter: contrast(150%);
}

4. Pelarasan Ketepuan

Untuk melaraskan ketepuan kandungan elemen, anda boleh menggunakan atribut saturate(value). Nilai sifat ini juga merupakan peratusan, dengan nilai 100% mewakili ketepuan asal, nilai kurang daripada 100% mewakili ketepuan berkurangan dan nilai lebih besar daripada 100% mewakili ketepuan meningkat.

.saturation-effect {
  filter: saturate(200%);
}

2. Atribut backdrop-filter

Atribut backgrounddrop-filter adalah baharu kepada CSS3 Ia boleh digunakan pada latar belakang elemen dan bukannya kandungan elemen. Gunakan atribut ini untuk mencapai kesan seperti kabur, pelarasan kecerahan, pelarasan kontras, pelarasan tepu, dsb. pada latar belakang elemen Ia juga sesuai untuk mencapai kesan kaca beku.

1. Kesan kabur

Untuk mencapai kesan kabur latar belakang, anda boleh menetapkan nilai atribut penapis latar belakang kepada kabur(nilai).

.backdrop-blur-effect {
  backdrop-filter: blur(5px);
}

2. Pelarasan kecerahan

Untuk melaraskan kecerahan latar belakang, anda boleh menggunakan kecerahan(nilai) sifat penapis latar belakang.

.backdrop-brightness-effect {
  backdrop-filter: brightness(80%);
}

3. Pelarasan kontras

Untuk melaraskan kontras latar belakang, anda boleh menggunakan kontras (nilai) atribut penapis latar belakang.

.backdrop-contrast-effect {
  backdrop-filter: contrast(150%);
}

4. Pelarasan ketepuan

Untuk melaraskan ketepuan latar belakang, anda boleh menggunakan tepu(nilai) atribut penapis latar belakang.

.backdrop-saturation-effect {
  backdrop-filter: saturate(200%);
}

Ringkasnya, dengan menggunakan sifat penapis dan penapis latar belakang CSS, kami boleh mencapai pelbagai kesan kaca beku secara fleksibel tanpa memerlukan alat pemprosesan imej tambahan, menjadikan reka bentuk halaman lebih ringkas dan cekap. Perlu diingatkan bahawa memandangkan sifat ini masih dalam percubaan pada masa ini, keserasian penyemak imbas dan platform yang berbeza mungkin berbeza-beza, jadi ujian keserasian diperlukan apabila menggunakannya.

Atas ialah kandungan terperinci Petua pengoptimuman sifat kaca beku CSS: penapis dan penapis latar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!