Bagaimanakah Saya Boleh Melaraskan Kelegapan Imej Latar Belakang Menggunakan CSS?

Melaraskan Kelegapan Imej Latar Belakang Menggunakan Kandungan Dihasilkan CSS

Sifat background-image-opacity CSS, seperti namanya, membolehkan anda mengubah suai ketelusan imej latar belakang. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa sifat sedemikian tidak wujud dalam CSS.

Menggunakan Kandungan dan Kelas Dijana CSS

Pendekatan alternatif melibatkan penggunaan Kandungan Dijana CSS untuk cipta latar belakang pudar:

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

.container {
  position: relative;
  z-index: 1;
  overflow: hidden; /* Consider cropping the image */
}

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

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

Walaupun teknik ini membenarkan anda memaparkan imej latar belakang yang pudar, teknik ini tidak membenarkan pelarasan dinamik kelegapannya.

Menggunakan Peralihan CSS

Untuk menganimasikan kelegapan imej latar belakang, anda boleh menggunakan peralihan CSS:

.container:before {
  -webkit-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

Tambahan pada peraturan .container:before ini akan menyebabkan kelegapan beralih kepada 1 dalam tempoh satu saat.

Keserasian Pelayar

• Firefox 5 dan ke atas (berpotensi FireFox 4 juga)
• IE 9 ( Gagal )
• Pelayar berasaskan webkit (Chrome 26 dan ke atas)

Perlu diingat bahawa pendekatan ini pada masa ini hanya disokong oleh versi terkini Firefox.

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