寻找可以模糊/隐藏文本的 jQuery 插件 [关闭]答案

【问题标题】：Looking for a jQuery plugin that can blur/hide text [closed]寻找可以模糊/隐藏文本的 jQuery 插件 [关闭]
【发布时间】：2010-02-19 01:05:11
【问题描述】：

我正在尝试找出是否有一个 jQuery 插件可以产生字面上模糊页面上元素的效果，因此用户无法阅读它们。它适用于我正在构建的抽认卡应用程序，我希望能够隐藏卡片的答案部分，使其看起来没有焦点，就好像您正在通过模糊的窗口查看它一样，可能带有某种叠加层。 jQuery 有这么多的插件和效果，我敢打赌这样的一个存在，但是谷歌搜索“jQuery 模糊效果”之类的结果可以预见地出现与幻灯片效果相关的结果，而不是我正在寻找的结果。有没有人听说过可以做这种事情的插件？

【问题讨论】：

不太可能，jQuery 只能在 HTML/CSS 中操作，但 Flash 可以。
有没有办法创建某种图像，当叠加在元素上时会产生模糊效果？我想不出什么样的形象会是随手可得的……
你能在服务器端做一些图形工作吗？ SVG 支持模糊，例如阴影（无论如何在 Inkscape 中），但大多数浏览器还没有实现。
我可能会拒绝服务器端的图形内容，因为虽然它会产生很好的效果，但我认为我不会为了得到它而投入太多精力。跨度>
回复：覆盖。理论上，您可以使用带有一些透明度“孔”的 png 叠加层来显示下面的一些内容。如果您使用 Photoshop，您可以在 Alpha 通道上使用不同的云渲染并调整对比度，直到得到您想要的。

标签： jquery plugins blurry

【解决方案1】：

我不得不实现类似的东西。我只是使用了一个透明的 PNG（嗯，显然大多数 PNG 都不透明），透明的口袋很小。足以让用户得到文本的提示，但看不到它。并不是真正的模糊 - 更像是棋盘游戏 Outburst 在您将卡片放在红色解码器后面之前所做的事情。我只是将覆盖 div 的背景图像设置为 PNG 并相应地调整大小。

【讨论】：

在我看来这是唯一的好方法。

【解决方案2】：

你可以用 CSS3 做到这一点：

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

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

【讨论】：

这正是我正在寻找的效果类型，但我正在寻找整个元素部分，而不仅仅是文本。虽然可能不存在...
这个有一些问题：(1) 不能在 IE 或 Opera 上运行。 (2) 用户仍然可以选择文本并获得不模糊的突出显示版本。
实际上，它在 Opera 9 中确实有效。
哦，选择文本不会“模糊”它。仍然需要复制和粘贴。 :)
如果它不仅仅是文本，我认为它不存在客户端。您可能需要查看 ImageMagick 或类似的东西……

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：