是否可以在HTML + CSS中模拟Mac Osx Finder搜索突出显示？

Question

Mac OSX Finder具有搜索功能，可以使匹配的部分变暗。

_{（来源：justaddwater.dk）}

有没有办法通过CSS模拟它？我正在考虑添加一个不透明度为50的半透明黑色div。但是我怎么在它上面插一个洞呢？并可能使边缘模糊？

有什么建议吗？

Answer 1

查看Expose集合中的jQuery TOOLS jquery插件。我认为它将完全符合您的要求。他们甚至有styling the mask with a background image的演示。

Answer 2

由于形状不规则，您可能正在寻找图像。并且由于需要不同级别的透明度，您可能需要一个仅限于所选项目的.png。

好问题，一种方法是让一个“选定的”png让发光的圆圈覆盖所选的一个，而另一个只是黑暗的png覆盖其他一切。

编辑：但是你可能想要使用像jquery这样的库，而不是编写所有内容来编写自己的内容，而不是重新发明轮子并节省大量的时间：D

Answer 3

也许PNG图像可以工作，带孔的正方形