寻找可以模糊/隐藏文本的jQuery插件

Question

我试图找出是否有一个jQuery插件可能会在页面上模糊地模糊元素，因此用户无法读取它们。这是我正在构建的flashcard应用程序，我希望能够隐藏卡片的答案部分，使其看起来没有焦点，好像你是通过模糊的窗口看到它，也许是某种叠加。 jQuery有这么多的插件和效果，我打赌这样的存在，但谷歌搜索“jQuery模糊效果”等可预测地发现与幻灯片效果相关的结果而不是我正在寻找的。有没有人听说过一个可以做这样的事情的插件？

Answer 1

我必须实现与此类似的东西。我刚刚使用了一个透明的PNG（好吧，显然大多数PNG都不透明），带有一点透明度。这足以让用户得到一些文字的提示，但并没有真正看到它。并不是真的模糊 - 更像是在你把卡片放在红色解码器之后的桌面游戏Outburst所做的事情。我只是将叠加div的背景图像设置为PNG并相应地调整大小。

Answer 2

您可以使用CSS3执行此操作：

    #hidden {
    color: transparent;
    text-shadow: #6374AB 0px 0px 20px;
}

使用更多信息进行编辑：目前仅适用于基于WebKit的浏览器。跨浏览器文本阴影信息： Creating Cross Browser Compatible CSS Text Shadows

Answer 3

如何使用推拉门技术？你可以有一个小的垂直切片png“模拟”一片模糊文本，两个圆形边缘模糊片盖住每一边。然后，您可以使用此模糊图像集创建叠加/切换div，其宽度与单词的字符数相似，并隐藏单词。

Answer 4

这里有一些使用css3执行此操作的示例：http://css-tricks.com/9053-fun-with-blurred-text/