Bagaimanakah Saya Boleh Membuat Imej Latar Belakang Separa Legap Sambil Mengekalkan Teks Sepenuhnya Legap dalam HTML?

Mencapai Kelegapan Separa untuk Imej Latar Belakang dengan Teks Lutsinar

Dalam HTML, adalah mungkin untuk menetapkan nilai kelegapan kepada elemen menggunakan "opacity "harta benda. Walau bagaimanapun, apabila menggunakan kelegapan pada div dengan imej latar belakang, teks dalam div juga menjadi kurang legap.

Untuk menyelesaikan isu ini, satu penyelesaian melibatkan penggunaan imej latar belakang "kecerunan linear". Begini cara anda boleh mencapainya:

<div><p>.myDiv {<br> background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0 )), url("imej_anda.png");<br>}<br>

Dengan menggunakan imej latar belakang kecerunan linear dengan warna lutsinar (rgba(255,255,255,0.5)), kita boleh cipta latar belakang lut sinar sambil mengekalkan kelegapan penuh untuk teks. Format warna "rgba" menentukan nilai merah, hijau, biru dan alfa (transparensi), dengan nilai alfa ditetapkan kepada 0.5 untuk ketelusan 50%.

Harta "url" kemudiannya menentukan laluan ke anda imej latar belakang. Dengan menggabungkan kecerunan linear dan imej latar belakang, kami mencipta latar belakang separa lutsinar dengan teks legap sepenuhnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Imej Latar Belakang Separa Legap Sambil Mengekalkan Teks Sepenuhnya Legap dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!