Bagaimana untuk Menetapkan Kelegapan Latar Belakang Div Tanpa Menjejaskan Elemen Terkandung dalam IE 8?

Susan Sarandon
Lepaskan: 2024-11-13 02:07:02
asal
216 orang telah melayarinya

How to Set Opacity of a Div's Background Without Affecting Contained Elements in IE 8?

Menetapkan Kelegapan Latar Belakang div Tanpa Menjejaskan Unsur Terkandung dalam IE 8

Gaya kelegapan mempengaruhi kedua-dua elemen induk dan elemen anaknya, yang mana boleh menjadi tidak diingini dalam senario tertentu. Untuk menetapkan kelegapan latar belakang div tanpa memberi kesan kepada elemen yang terkandung, pertimbangkan untuk menggunakan pendekatan yang berbeza:

Menggunakan rgba() Warna Latar Belakang

Fungsi rgba() membenarkan anda untuk menentukan nilai merah, hijau, biru (RGB), serta nilai saluran alfa. Nilai saluran alfa menentukan kelegapan. Contohnya:

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

Di sini, tiga nombor pertama mewakili nilai warna RGB, manakala 0.5 mewakili kelegapan saluran alfa (50%).

Penyelesaian Khusus IE: CSS3Pie

Walau bagaimanapun, kaedah ini tidak menyokong IE 8 dan ke bawah. Untuk menangani perkara ini, anda boleh menggunakan polyfill CSS3Pie. CSS3Pie menyediakan sokongan untuk pelbagai ciri CSS3 moden, termasuk warna latar belakang rgba. Untuk menggunakannya:

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

Alternatif: Gaya Penapis IE dengan Gradien

Alternatif lain yang berfungsi dalam IE ialah menggunakan gaya penapis dengan kata kunci kecerunan. Walau bagaimanapun, pendekatan ini kurang intuitif dan memerlukan interaksi langsung dengan penapis IE.

Nota Tambahan

  • rgba() tidak berfungsi dalam IE 8 ke bawah.
  • CSS3Pie menambah ciri CSS3 tambahan, bukan hanya latar belakang rgba.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Kelegapan Latar Belakang Div Tanpa Menjejaskan Elemen Terkandung dalam IE 8?. 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