Bagaimana untuk Menambah Tindanan Telus Hitam dengan Teks pada Imej pada Hover Menggunakan CSS?

Menambah Tindanan Lutsinar Hitam pada Imej pada Tuding Menggunakan CSS

Mencipta tindanan lutsinar hitam pada imej semasa tuding boleh dicapai menggunakan CSS. Berikut ialah panduan komprehensif untuk mencapai perkara ini:

Menggunakan Elemen Pseudo

Untuk mengelakkan isu dengan elemen tindanan pada elemen img tertutup, anda boleh memasukkan elemen pseudo dalam tempat. Balut elemen img sedemikian:

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

Konfigurasikan CSS:

.image {
  position: relative;
  width: 400px;
  height: 400px;
}
.image img {
  width: 100%;
  vertical-align: top;
}
.image:after {
  content: '\A';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}
.image:hover:after {
  opacity: 1;
}

Menambah Teks pada Tuding

Untuk kesederhanaan, sertakan teks sebagai nilai kandungan unsur pseudo:

.image:after {
  content: 'Your Text';
  color: #fff;
}

Sebagai alternatif, tetapkan teks dalam atribut data-* untuk paparan teks unik:

.image:after {
  content: attr(data-content);
  color: #fff;
}

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

Menggabungkan Tindanan dan Teks

Penggayaan berasingan membenarkan kedudukan elemen bebas:

.image:after, .image:before {
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
}
.image:after {
  content: '\A';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.image:before {
  content: attr(data-content);
  width: 100%;
  color: #fff;
  z-index: 1;
  bottom: 0;
  padding: 4px 10px;
  text-align: center;
  background: #f00;
  box-sizing: border-box;
}
.image:hover:after, .image:hover:before {
  opacity: 1;
}

Atas ialah kandungan terperinci Bagaimana untuk Menambah Tindanan Telus Hitam dengan Teks pada Imej pada Hover Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!