Mungkin ada agak latar belakang?

Artikel Jake "Tidak dapat melangkaui mana-mana dua elemen DOM pada masa ini" meneroka sebab-sebab yang mendalam mengapa unsur-unsur tidak boleh benar-benar silang, dan artikel ini sangat menarik. Walaupun kelegapan dua elemen boleh bernyawa, ini bukan kesan silang yang nyata. Ternyata fungsi CSS Chrome/WebKit yang unik -webkit-cross-fade() dapat mencapai kesan ini. Dokumentasi MDN menyebut bahawa fungsi itu dinormalisasi, tetapi terdapat perbezaan antara versi pelaksanaan yang berbeza, jadi ia sedikit mengelirukan ... tetapi ia wujud:

 .el {
  Latar Belakang: -WebKit-Cross-Fade (URL (IMG1.SVG), URL (IMG2.SVG), 50%);
}

Saya tidak tahu ada ciri ini.

Perkara pertama yang masuk ke dalam fikiran saya ialah: Jika salah satu imej adalah imej kosong yang telus, adakah ketelusan separa akan digunakan untuk imej yang lain? Oleh itu, ia boleh digunakan sebagai alternatif kepada background-opacity ( background-opacity tidak wujud, tetapi ia merasakan ia harus wujud).

Saya melakukan ujian untuk melihat apakah ia berfungsi:

Hasil ujian sah! Kod teras adalah seperti berikut:

 .el {
  imej latar belakang: -Webkit-cross-fade (
    URL (image.jpg),
    url(data:image/gif; base64,R0lGODlhAQABAIAAAAAAAAAAP///yH5BAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7),
    50%
  );
}

Ini adalah imej GIF telus 1-piksel yang dikodkan oleh Base64.

Kaedah ini tidak berfungsi di Firefox, tetapi berfungsi dalam pelayar lain. Di samping itu, sokongan penyemak imbas boleh diuji secara langsung dalam CSS dan kaedah yang berbeza boleh digunakan apabila tidak disokong.

 @Supports (latar belakang: -WebKit-cross-fade (url (), url (), 50%)) {
  /* Sapukan kaedah ini hanya apabila disokong, alternatif Firefox berada di luar ini*/
}

Kod di atas sudah termasuk dalam demo.

Atas ialah kandungan terperinci Mungkin ada agak latar belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!