是否可以在 HTML 中模拟 Mac Osx Finder 搜索突出显示 + CSS？
Mac OSX Finder 具有搜索功能，可以使除匹配部分之外的所有内容变暗。
（来源： justaddwater.dk)
有没有办法通过 CSS 来模拟它？我正在考虑添加一个不透明度为 50 的半透明黑色 div。但是我该如何在其中切一个洞呢？并可能使边缘模糊？
有什么建议吗？
Mac OSX Finder has a search feature that darkens everything but the part that matches.
(source: justaddwater.dk)
Is there a way to emulate it via CSS? I was thinking about adding a semi-transparent black div with opacity 50. But how then do I cut a hole in it?? and possibly make the edge fuzzy?
Any suggestions?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
查看 Expose 来自 jQuery 工具 集合。我认为它会完全满足您的需求。他们甚至还提供了使用背景图像设置蒙版样式的演示。
Check out the Expose jquery plugin from the jQuery TOOLS collection. I think it will accomplish exactly what you are looking for. They even have a demo of styling the mask with a background image.
由于形状不规则，您可能正在寻找图像。由于需要不同级别的透明度，您可能需要一个仅粘贴在所选项目上的 .png。
好问题，一种方法是使用一个“选定”的 png，其中发光的圆圈覆盖选定的，而另一个只是黑色的 png 覆盖其他所有内容。
编辑：但是您可能想要使用像 jquery 这样的库，而不是从头开始编写所有内容，以免重新发明轮子并节省大量时间：D
Due to the irregular shapes, you're probably looking for an image. And due to the need for varying levels of transparency, you probably want a .png that would just be stuck over the selected item.
Good question, one way would be to have a "selected" png that had the glowing circle cover the selected one, and a different just dark png cover everything else.
EDIT: But you would probably want to use a library like jquery rather than coding everything from scrath your self, as to not reinvent the wheel and save TONS of time :D
也许 PNG 图像会起作用，一个带孔的正方形
maybe a PNG image will work, a square with hole