如何通过 Ctrl+F 使图像可搜索答案

【问题标题】：How to make images searchable via Ctrl+F如何通过 Ctrl+F 使图像可搜索
【发布时间】：2021-04-05 17:37:34
【问题描述】：

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

我想使用浏览器的“在页面中搜索”功能使每个产品名称都可搜索。在搜索产品名称时，用户应该以相应的图像结束。

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

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

【问题讨论】：

那么，让 CTRL + F 使用alt 属性？
@4castle 本质上是的，虽然我对 HTML 文本和 CSS 的（可靠的）恶作剧持开放态度。
我不认为真的有办法做到这一点，更好的解决方案是在您的页面上设置一个搜索框，使用图像的alt 属性进行搜索。你可以用 Javascript 来做到这一点。
是否将文本放在图像下方（如在 z-index 中，而不仅仅是将文本放在下方）可以搜索图像？
见this similar question。遗憾的是，我认为改变这样的浏览器功能是不可能的。

标签： html css

【解决方案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 元素上，因此您仍然可以搜索并找到它。

【讨论】：

我试过了，我可以验证它是否有效。很有创意！我的想法是使用非常小的文本（比如 1px）。它也有效。

【解决方案2】：

使用z-index，可以隐藏图片后面的文字。这样就可以使用 Chrome、Safari 和 Firefox 进行搜索（遗憾的是无法在 IE 中测试）。

<html>
<body>
<style>
.product-image {
    position: relative;
    width: 100px;
    height: 100px;
    display: block;
    overflow: hidden;
}
img.product {
    position:absolute;
    height: 100px;
    width: 100px;
}
div.product {
    z-index: -1;
    position: absolute;
}
</style>

<table>
<tr><td><div class="product-image"><img src="product-image.png" class="product"></img><div class="product">name 1</div></div></td></tr>
<tr><td><div class="product-image"><img src="product-image.png" class="product"></img><div class="product">something else...</div></div></td></tr>
<table>
</body>
</html>

它在 FF 和 Chrome 中运行良好，但在 Safari 中它会从图像后面拉出文本，您的用户可能会觉得不和谐。

【讨论】：

【解决方案3】：

这里的解决方案有一个问题，即用户无法判断他们找到了什么，因为他们正在搜索的文本隐藏在图像后面。如果屏幕上有 12 张图片，则不清楚哪一张与他们的搜索匹配。

我做了类似的事情，但我只是在图像上方有透明文本。 <p style="color:transparent">My product title</p>.

这样，当浏览器滚动到正确的区域时，用户也可以在输入文本时看到一个蓝色的选择。

（至少在 Chrome 中，“透明”文本一旦被选中就会变得可见）

【讨论】：