Bagaimana untuk mencapai kelegapan yang berbeza untuk elemen latar belakang dan teks dalam CSS?

Memahami Kelegapan Latar Belakang CSS

Apabila bekerja dengan CSS, menetapkan kelegapan elemen adalah tugas biasa. Walau bagaimanapun, kekeliruan boleh timbul apabila menggunakan kelegapan pada kedua-dua elemen latar belakang dan kanak-kanak.

Soalan:

Saya menghadapi tingkah laku yang tidak dijangka di mana kelegapan kedua-dua latar belakang dan teks di dalam bekas adalah sama, walaupun menetapkan nilai yang berbeza. Bagaimanakah saya boleh mengawal kelegapan setiap elemen secara bebas?

Jawapan:

Kelegapan CSS berfungsi secara hierarki. Elemen kanak-kanak mewarisi kelegapan bekas induknya. Oleh itu, menetapkan kelegapan bekas kepada nilai tertentu juga akan mempengaruhi kelegapan anak-anaknya.

Penyelesaian:

Untuk mencapai kelegapan yang berbeza untuk latar belakang dan teks , anda boleh menggunakan salah satu daripada pilihan berikut:

1. Gunakan Imej Latar Belakang Lutsinar:

Simpan imej latar belakang anda sebagai fail PNG dengan ketelusan. Ini akan membolehkan anda mempunyai latar belakang lut sinar sambil mengekalkan kelegapan penuh untuk teks.

2. Gunakan Warna RGBa untuk Latar Belakang:

Tentukan warna latar belakang menggunakan format RGBA, dengan nilai terakhir mewakili saluran alfa (kelegapan). Berikut ialah contoh latar belakang hitam pudar 50%:

<code class="css">div {
  background-color: rgba(0, 0, 0, 0.5);
}</code>

Nota:

Menggunakan kelegapan pada elemen kanak-kanak secara amnya tidak disyorkan, kerana ia boleh menyebabkan yang tidak diingini kesan dalam penyemak imbas tertentu.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kelegapan yang berbeza untuk elemen latar belakang dan teks dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!