Bagaimanakah Saya Boleh Mengawal Kelegapan Imej Latar Belakang dengan Kandungan Dihasilkan CSS?

Kelegapan Imej Latar Belakang CSS Dijadikan Mungkin dengan Kandungan Dijana

Berbeza dengan pelarasan kelegapan warna latar belakang, melaraskan nilai alfa imej latar belakang sebelum ini dianggap mencabar. Walau bagaimanapun, Kandungan Dihasilkan CSS menawarkan penyelesaian untuk mengubah kelegapan imej latar belakang secara dinamik.

Untuk melaksanakan teknik ini, buat div bekas dengan kedudukan dan dimensi yang ditentukan, dan isikan dengan elemen kandungan yang selebihnya. Seterusnya, tentukan imej latar belakang dalam elemen pseudo yang dibuat untuk bekas. Sifat kelegapan kemudiannya boleh dimanipulasi dalam elemen pseudo.

Contoh demonstrasi boleh didapati di http://jsfiddle.net/gaby/WktFm/508/. Di bawah ialah coretan kod yang diperlukan:

HTML

<div>

CSS

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

Sementara kelegapan terjana kandungan tidak boleh diubah suai secara langsung, ia masih boleh dikawal secara dinamik melalui acara dan kelas CSS. Sebagai contoh, kod berikut akan melaraskan kelegapan kepada 1 apabila dituding:

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

Selain itu, peralihan CSS boleh digunakan untuk menghidupkan perubahan kelegapan dengan lancar. Dengan menambahkan sifat berikut pada peraturan .container:before, kelegapan akan beralih kepada 1 lebih 1 saat:

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

Adalah penting untuk mengambil perhatian keserasian teknik ini yang berbeza-beza merentas penyemak imbas yang berbeza. Firefox 5 dan kemudian menyokongnya, tetapi Internet Explorer 9 dan ke bawah tidak menyokongnya. Penyemak imbas berasaskan web seperti Chrome mungkin mempunyai sokongan yang tidak konsisten berdasarkan versinya.

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