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;
  z-index: 5;
}

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

Answer 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＆amp;但是在Chrome浏览器中，Chrome会将图片从图片后面拉出来，您的用户可能会觉得这些文字不合适。

Answer 3

这里的解决方案存在一个问题，即用户正在搜索的文本隐藏在图像后面，因此用户无法告诉他们已经找到了某些东西。如果屏幕上有12张图片，则不清楚哪一张与他们的搜索相匹配。

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

这样，当浏览器滚动到正确的区域时，用户在键入文本时也可以看到周围出现蓝色选择。

（至少在Chrome中，“透明”文本一旦被选中就可以显示）

如何通过Ctrl + F搜索图像

3 个答案: