Bagaimana untuk Mengekalkan Susunan Susun Walaupun Penapis WebKit Hover dalam CSS?

Menyusun Perubahan Susunan dalam Webkit Penapis Tuding: Memahami Konteks Penimbunan

Isu yang ingin tahu timbul mengenai susunan susunan apabila menggunakan penapis WebKit: semasa melayang atas imej, pesanan berubah secara tidak dijangka. Untuk menyelesaikan cabaran ini tanpa mengganggu elemen tapak lain, selami selok-belok konteks tindanan.

Konteks tindanan menentukan susunan unsur dipaparkan pada halaman. Elemen mencipta konteks tindanan baharu apabila sifat gayanya termasuk nilai tertentu, seperti transformasi, limpahan atau penapis.

Dalam contoh yang disediakan, apabila penapis WebKit (skala kelabu) digunakan pada imej, a konteks tindanan ditetapkan secara automatik. Konteks yang baru dicipta ini menyebabkan div (".slaid-content") yang diposisikan secara mutlak diletakkan di bawah imej, menyebabkan ia disembunyikan.

Untuk mengelakkan kelakuan yang tidak diingini ini dan mengekalkan susunan susunan asal, berikut ialah penyelesaian yang disemak:

Ganti CSS ini:

<code class="css">li a:hover img {
  -webkit-filter: grayscale(100%);
}</code>

Dengan alternatif ini, yang mengelakkan daripada mewujudkan konteks tindanan:

<code class="css">li a:hover img::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  filter: grayscale(100%);
  z-index: -1;
}</code>

Dengan menggunakan unsur pseudo (: :before) dengan kedudukan mutlak dan meletakkannya di bawah imej, kami mensimulasikan kesan penapis dengan berkesan tanpa mencipta konteks tindanan baharu. Penyelesaian pintar ini membolehkan anda mencapai kesan visual yang diingini sambil mengekalkan susunan susunan yang dimaksudkan.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Susunan Susun Walaupun Penapis WebKit Hover dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!