Bagaimana untuk menetapkan latar belakang imej telus menggunakan CSS

Dalam reka bentuk web, menetapkan latar belakang imej menjadi telus adalah operasi biasa. Ia boleh menjadikan gambar digabungkan dengan latar belakang halaman untuk mencapai kesan yang lebih semula jadi. Dalam artikel ini, kami akan memperkenalkan cara menggunakan CSS untuk menetapkan latar belakang imej menjadi telus.

Pertama sekali, untuk menetapkan ketelusan latar belakang imej, anda perlu menggunakan kelegapan sifat CSS. Atribut ini boleh mengawal ketelusan elemen, dengan nilai antara 0 hingga 1, di mana 0 bermaksud telus sepenuhnya dan 1 bermaksud legap sepenuhnya. Apabila menggunakan atribut ini, anda perlu memberi perhatian kepada perkara berikut:

1. Hanya elemen biasa (seperti
   ) dan imej () boleh menggunakan atribut kelegapan.
2. Jika unsur anak unsur juga memerlukan ketelusan, atribut kelegapan perlu ditakrifkan semula dalam unsur anak.
3. Pada pelayar IE8 dan ke bawah, atribut kelegapan tidak disokong. Tetapi anda boleh menggunakan penapis Alpha khusus IE untuk mencapai kesan yang sama.

Sekarang, kami menunjukkan cara untuk menetapkan latar belakang imej menjadi telus dalam dua cara berikut.

1. Menggunakan atribut kelegapan CSS

Kami boleh mencapai kesan ketelusan imej yang cantik melalui kod CSS. Contohnya, contoh berikut:

img {
    opacity: 0.5;
}

Kod di atas menetapkan ketelusan imej kepada 50%. Iaitu, kita masih boleh melihat imej dengan jelas, tetapi ia menjadi lebih terang dalam warna. Sudah tentu, anda juga boleh menetapkan ketelusan kepada nilai lain untuk mencapai kesan yang anda inginkan.

2. Gunakan penapis Alpha

Seperti yang dinyatakan di atas, penyemak imbas IE8 dan ke bawah tidak menyokong atribut kelegapan. Tetapi kita boleh menggunakan penapis khusus IE untuk mencapai kesan yang sama. Berikut ialah contoh:

img {
    filter: alpha(opacity=50);
    zoom: 1;
}

Dalam kod di atas, nilai atribut penapis ialah "alpha(opacity=50)", yang bermaksud ketelusan ialah 50%. Pada masa yang sama, kita juga perlu menambah atribut zum:1 Atribut ini membolehkan IE6/7 menyokong penapis alfa Apabila nilainya ialah 1, ia bermakna ia dihidupkan.

Perlu diingatkan terdapat masalah apabila menggunakan penapis Alpha iaitu akan membuatkan gambar menjadi kabur. Ini kerana penapis akan menjadikan keseluruhan elemen telus, termasuk fon dan latar belakang, menyebabkan imej menjadi kabur. Untuk menyelesaikan masalah ini, kita boleh menggunakan penapis Gradien khusus IE. Penapis ini akan menggunakan ketelusan pada warna latar belakang tanpa menjejaskan imej itu sendiri. Menggunakan penapis ini memerlukan takrifan berikut:

img {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
    zoom: 1;
}

Dalam kod di atas, startColorstr dan endColorstr ialah titik permulaan dan penamat bagi kecerunan ketelusan, dengan #7F000000 mewakili nilai warna hitam dengan ketelusan 50% . Penapis ini juga perlu menambah atribut zum:1.

Melalui pengenalan di atas, kami telah mempelajari cara menggunakan CSS untuk menetapkan latar belakang imej menjadi telus. Tidak kira kaedah yang anda gunakan, ia boleh membawa kesan yang lebih cantik kepada reka bentuk web anda.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan latar belakang imej telus menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!