Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menetapkan Kelegapan Latar Belakang Div tanpa Menjejaskan Elemen Terkandung dalam IE8?

Bagaimana untuk Menetapkan Kelegapan Latar Belakang Div tanpa Menjejaskan Elemen Terkandung dalam IE8?

Mary-Kate Olsen
Lepaskan: 2024-11-17 02:02:03
asal
444 orang telah melayarinya

How to Set Opacity of a Div Background without Affecting Contained Elements in IE8?

Menetapkan Kelegapan Latar Belakang Div tanpa Menjejas Elemen Terkandung dalam IE 8

Menetapkan kelegapan untuk latar belakang div sambil mengekalkan penampilan elemen yang terkandung di dalamnya boleh mencabar dalam Internet Explorer 8. Sifat kelegapan yang biasa digunakan mempengaruhi kedua-dua div dan kandungannya.

Warna Latar Belakang rgba

Penyelesaian yang disyorkan ialah menggunakan rgba warna latar belakang, dengan saluran "a" mewakili kelegapan. Pendekatan ini berfungsi dengan baik dalam kebanyakan penyemak imbas moden tetapi tidak disokong dalam IE8 dan lebih rendah.

.myDiv {
  background: rgba(200, 54, 54, 0.5);
}
Salin selepas log masuk

Css3Pie Hack for IE

Untuk mencapai sokongan kelegapan dalam IE8, anda boleh menggunakan CSS3Pie, alat yang meniru ciri CSS3 dalam pelayar lama. Ia memperkenalkan sifat -pie-background, yang harus digunakan bersama dengan atribut tingkah laku.

.myDiv {
  background: rgba(200, 54, 54, 0.5);
  -pie-background: rgba(200, 54, 54, 0.5);
  behavior: url(PIE.htc);
}
Salin selepas log masuk

Gaya Penapis IE

Sebagai alternatif, anda boleh memanfaatkan IE's gaya penapis dengan kata kunci kecerunan. Pendekatan ini digunakan secara dalaman oleh CSS3Pie.

.myDiv {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33CCFF', endColorstr='#000000', GradientType=1);
}
Salin selepas log masuk

Walaupun teknik ini memerlukan sintaks yang lebih khusus, ia menyediakan pilihan sandaran untuk penyemak imbas yang tidak menyokong rgba.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Kelegapan Latar Belakang Div tanpa Menjejaskan Elemen Terkandung dalam IE8?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan