是否有任何方法允许浏览器搜索页面上的“隐藏”文本(或图像的alt文本)？

Question

我有我网站上的一个页面，上面有一堆零售商的标识。我希望用户能够使用浏览器的搜索功能搜索零售商，但我在页面上没有零售商的名字，只有他们的徽标。

我正在寻找的行为是，用户在浏览器的搜索框中键入零售商的名称(页面)，浏览器跳到零售商的徽标。这种行为对于像图像画廊这样的东西也是非常有用的。

从我所做的搜索中，我认为这是不可能的，但是是否有任何方法可以在浏览器可以搜索的页面上“隐藏”文本，或者让浏览器搜索图像的alt文本，而不需要在页面上显示可见的文本？

Answer 1

一个可能有效的技巧是用一个容器(例如div.box )包围每个映像，并给它一个额外的子元素，例如div.search-text。容器用于允许搜索文本绝对定位在图像的顶部。搜索文本中填充了要搜索的文本，其样式方式使其不可见，但允许继续搜索。

.box {
    position: relative;
}

.search-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
}

或者看看http://codepen.io/ckuijjer/pen/EaPZZO，我列举了每一只小猫。试着搜索五到两个。

但您可能需要进行广泛的跨浏览器测试。我假设每个浏览器都有自己的逻辑来决定何时可以搜索一段文本(例如，Chrome不喜欢在文本有font-size: 0时进行搜索，但是opacity: 0没有任何问题。)

Answer 2

您可以在div -at中使用与图像相同的位置的文本，并使用z索引隐藏它。随着z索引，您可以使用彩色文本匹配与背景。