Bagaimanakah Saya Boleh Mengawal Kelegapan Imej Latar Belakang Menggunakan CSS?

Menukar Kelegapan Imej Latar Belakang Menggunakan CSS

Selain menjadikan warna latar belakang elemen telus menggunakan CSS, ia juga mungkin untuk melaraskan kelegapan imej latar belakang. Ini memberikan kawalan yang lebih besar ke atas kemunculan elemen pada halaman web.

Untuk mengubah suai nilai alfa imej latar belakang, sifat background-image-opacity boleh digunakan. Walau bagaimanapun, sifat ini tidak disokong oleh semua penyemak imbas.

Penyelesaian Menggunakan Kandungan Dihasilkan CSS

Untuk penyemak imbas yang tidak menyokong background-image-opacity, pendekatan alternatif ialah untuk menggunakan kandungan yang dihasilkan CSS. Dengan mencipta elemen pseudo yang bertindih dengan elemen utama dan memberikannya imej latar belakang, kelegapan imej boleh dikawal.

Kod:

<div class="container">
    Contents
</div>

.container {
    position: relative;
    z-index: 1;
    overflow: hidden; /*if you want to crop the image*/
}

.container:before {
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    content: url('path/to/image.ext');
    opacity: 0.4;
}

Batasan

Walaupun kaedah ini membenarkan kelegapan pelarasan, adalah penting untuk ambil perhatian bahawa tidak mungkin untuk mengubah suai kandungan yang dijana secara langsung. Oleh itu, menetapkan kelegapan secara dinamik menggunakan kelas dan acara CSS tidak disokong.

Pilihan Tambahan

• Peralihan: Dengan menambahkan peralihan CSS kepada kandungan yang dijana, kelegapan boleh dianimasikan pada yang ditentukan tempoh.

Keserasian Pelayar

Pelayar berikut kini menyokong kandungan yang dijana CSS untuk imej latar belakang:

• Firefox 5 dan ke atas
• Pelayar berasaskan WebKit (Chrome, Safari, dll.)
• IE 9 dan ke atas

Kesimpulan

Walaupun sifat background-image-opacity tidak disokong secara universal, menggunakan CSS kandungan yang dijana menyediakan penyelesaian untuk penyemak imbas yang tidak menyokongnya. Teknik ini membolehkan kawalan fleksibel ke atas ketelusan imej latar belakang, meningkatkan fleksibiliti reka bentuk halaman web.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengawal Kelegapan Imej Latar Belakang Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!