是否可以在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图像可以工作，一个带孔的正方形