html – 如何通过Ctrl F搜索图像

我有一个包含大型产品表的页面.每个产品都由图像表示.

我想使用浏览器的“在页面中搜索”功能来搜索每个产品名称.搜索产品名称时,用户应该最终得到相应的图像.

我无法添加以文本形式显示的产品名称(名称已在每个图像上突出显示),但可以添加不可见的文本元素.

有没有一种强有力的方法来做到这一点？

解决方法

如何在图像后面隐藏一些文字？像这样的东西.

<div class="image-block">
   <div class="img-description">Some text.</div>
   <img>
</div>

.image-block {
   position: relative;
}

.img-description {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.image-block img {
  position: relative;
  z-index: 5;
}

基本上,这会将图像放在img-description元素上,因此您仍然可以搜索并找到它.