Question

我一直在开发一个页面，我打开一组工具，除了覆盖的工具图标外，下面的所有内容都模糊不清。（就像mac的Launcher应用程序一样）

以下是我的表现：

HTML

<body> 
    <div id="tools"></div>
    <div Id="Blur">in here I have all my page content</div>
</body>

的jQuery

$(function(){ $('Blur').blur(); });

问题是：这是有效的，但问题是，一旦页面上有一些相当多的内容，模糊进入和退出的速度都很慢。有没有人知道更好的模糊页面的方法，而不会对性能产生重大影响？

（如果格式化看起来不太好或者您需要更多信息，请告诉我！这是我第一篇有关Stack Overflow的帖子）

谢谢！

Answer 1

您可能想要使用CSS blur filter。

#Blur {
    filter: blur(1px);
}

Answer 2

在jQuery中，blur（）函数并不意味着模糊的东西。当用户例如点击外部元素或点击tab键时，它将起作用。它与focus（）相同，但“反向”。

因此，如果您在html中输入了，并且您希望在用户关注输入时使用的功能（click（）不相同，因为用户可以使用tab键关注输入），那么您将使用：

$("input").focus(){...};

但是如果你想要的功能在用户从输入中失焦时可以正常工作（点击外面或按Tab键或更改chrome选项卡 - 无论如何），那么你将使用：

$("input").blur(){...};