Bolehkah CSS Mencipta Tindanan Hitam Telus pada Tuding Imej?

Tindanan Lutsinar Hitam pada Tuding Imej Menggunakan CSS: Pendekatan Mendalam

Pertanyaan:

Bolehkah saya membuat tindanan hitam lutsinar yang muncul apabila menuding pada imej menggunakan sahaja CSS?

Respons:

Ya, anda boleh mencapai kesan tindanan hitam telus pada tuding imej menggunakan CSS. Begini caranya:

Pendekatan Alternatif Menggunakan Elemen Pseudo:

Daripada menggunakan elemen tindanan, anda boleh memanfaatkan elemen pseudo pada imej. Kaedah ini meningkatkan daya tindak balas dan serba boleh:

HTML:

<div class="image">
    <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="">
</div>

CSS:

.image {
  position: relative;
  /* Optional dimensions */
}

.image img {
  width: 100%;
  vertical-align: top;
}

.image:after {
  content: '\A';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}

.image:hover:after {
  opacity: 1;
}

Penjelasan:

• kedudukan: relatif pada .elemen imej membenarkan elemen pseudo untuk meletakkan dirinya berbanding induknya.
• menjajarkan menegak: atas membetulkan penjajaran garis dasar pada imej.
• Elemen pseudo :after mencipta tindanan dengan mutlak kedudukan dan latar belakang separa lutsinar hitam.
• Peralihan kelegapan digunakan untuk peralihan yang lancar pada tuding.

Menambah Teks pada Tuding (Pilihan):

Untuk memaparkan teks pada tuding, tetapkan sifat kandungan unsur pseudo kepada teks yang diingini:

.image:after {
  content: 'Hover Text';
  /* Other styling... */
}

Atas ialah kandungan terperinci Bolehkah CSS Mencipta Tindanan Hitam Telus pada Tuding Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!