有没有办法让浏览器搜索页面上的“隐藏”文本（或图像的替代文字）？

Question

我有a page on my website，上面有一堆零售商标识。我希望用户能够使用他们的浏览器搜索功能搜索零售商，但我没有零售商和＃39;页面上的文字名称，只是他们的徽标。

我正在寻找的行为是用户在其浏览器的搜索框（页面中）中键入零售商的名称，浏览器跳转到零售商的位置商标。这种行为对于像图库这样的东西也非常有用。

从我已经完成的搜索开始，我认为这是不可能的，但是有没有什么方法可以隐藏＆＃34;浏览器可以搜索的页面上的文字，或者浏览器搜索图像的替代文字，而页面上没有可见的文字？

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-index隐藏它。与z-index一起，您可以使用带背景的彩色文本匹配。