Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menetapkan Kelegapan Latar Belakang Div Tanpa Menjejaskan Elemen Terkandung dalam IE 8?

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

Susan Sarandon
Susan Sarandonasal
2024-11-13 02:07:02241semak imbas

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);
}

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);
}

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!

Kenyataan:
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