Opacity vs Penapis CSS

Apabila kita meletakkan teks pada imej, kita sentiasa berhadapan dengan masalah kebolehbacaan.

Saya sering bermain dengan kelegapan untuk membetulkan masalah ini. Dan terdapat sifat Penapis CSS dan banyak kesannya.

Secara lalai saya berpendapat bahawa yang terakhir menawarkan pemaparan yang lebih kualitatif daripada kelegapan. Tetapi saya ingin menjelaskannya dengan jelas.

Dengan kelegapan

Mudah sahaja. Kami menambah warna latar belakang pada elemen induk dan bermain dengan sifat kelegapan imej.

.element-parent {
  background-color: #000;
}

.element-image {
  opacity: 0.7;
}

Dengan Penapis CSS

Sifat penapis membolehkan anda menggunakan penapis atau kesan grafik.
Sifat ini menawarkan penapis berikut: kabur, kecerahan, kontras, bayang-bayang jatuh, skala kelabu, putar warna, songsang, kelegapan, tepu dan sepia.

Penapis yang menarik minat saya di sini ialah kecerahan.
Ia lebih mudah daripada kelegapan. Kami menggunakan sifat penapis pada elemen imej.

.element-image {
  filter: brightness(0.7);
}

Hasilnya

Saya membuat pen kod untuk membandingkan.
Di sebelah kiri versi kelegapan dan di sebelah kanan versi penapis.
Keputusan perlumbaan, saya tidak nampak perbezaan!

Jadi jika anda tertanya-tanya penyelesaian yang mana untuk digunakan, saya beritahu anda ia seperti voulvoul. Yang paling sesuai dengan anda.

Atas ialah kandungan terperinci Opacity vs Penapis CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!