提问人：Pekka 提问时间：5/22/2016 最后编辑：Pekka 更新时间：4/5/2021 访问量：6409
如何通过 Ctrl+F 使图像可搜索
How to make images searchable via Ctrl+F
问：
我有一个带有大型产品表的页面。每个产品都由一个图像表示。
我想使用浏览器的“页面搜索”功能使每个产品名称都可以搜索。搜索产品名称时，用户应以相应的图像结束。
我无法添加以文本形式可见的产品名称（该名称已经在每张图像上非常突出），但可以添加不可见的文本元素。
有没有可靠的方法可以做到这一点？
答：
3赞
GMchris
5/22/2016
#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
评论
0赞
4castle
5/22/2016
我试过了这个，我可以验证它是否有效。很有创意！我的想法是使用非常非常小的文本（如 1px）。它也奏效了。
1赞
TZHX
5/22/2016
#2
使用 ，您可以将文本隐藏在图像后面。这允许使用 Chrome、Safari 和 Firefox 搜索它（不幸的是无法在 IE 中测试）。z-index
<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中，它会从图像后面提取文本，您的用户可能会觉得这很不和谐。
1赞
Codemonkey
6/28/2019
#3
这里的解决方案存在一个问题，即用户无法判断他们找到了什么，因为他们正在搜索的文本隐藏在图像后面。如果屏幕上有 12 张图片，则不清楚哪一张符合他们的搜索。
我做了类似的事情，但我只是在图像上方有透明的文字。.<p style="color:transparent">My product title</p>
这样，当浏览器滚动到正确的区域时，用户还可以在键入文本时看到文本周围增长的蓝色选择。
（至少在 Chrome 中，“透明”文本一旦被选中就会变为可见）
下一个：重写规则生成器？[关闭]
评论
altalt