html - 如何通过 Ctrl+F 使图像可搜索

Question

我有一个包含大型产品表的页面。每个产品都由一张图片表示。

我想使用浏览器的“在页面中搜索”功能使每个产品名称都可搜索。在搜索产品名称时，用户应该最终找到相应的图片。

我无法添加以文本形式显示的产品名称(该名称在每张图片上已经非常显眼)，但可以添加不可见的文本元素。

有没有可靠的方法来做到这一点？

Answer 1

在图片后面隐藏一些文字怎么样？像这样。

<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;
}

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