Bagaimanakah Saya Boleh Mengawal Kelegapan Imej Latar Belakang dengan CSS?

Memanipulasi Kelegapan Imej Latar Belakang melalui CSS

Berbeza dengan menukar kelegapan warna latar belakang, pertanyaan timbul mengenai pelarasan kelegapan imej latar belakang. Walaupun menyimpan imej dengan tahap ketelusan yang berbeza-beza adalah pilihan, kawalan nilai alfa dinamik adalah wajar.

Untuk itu, pendekatan mudah melibatkan dua elemen DIV bersarang:

<div>

Walaupun berfungsi, ini kaedah menyusahkan dan mengganggu susun atur yang lebih kompleks.

CSS Generated Kandungan

Penyelesaian alternatif terletak pada Kandungan Dihasilkan CSS, membolehkan anda menetapkan imej latar belakang terus pada elemen bekas:

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

Kaedah ini mendayakan kawalan kelegapan imej latar belakang.

Manipulasi Kelegapan Dinamik

Walau bagaimanapun, ia tidak mungkin untuk mengubah suai kelegapan kandungan yang dijana secara dinamik.

Untuk memintas pengehadan ini, pertimbangkan untuk menggunakan kelas dan acara CSS:

.container:hover:before{
    opacity:1;
}

Peralihan CSS

Peralihan CSS boleh digunakan untuk menganimasikan kelegapan imej latar belakang secara dinamik:

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

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