jquery密集的文本阴影和模糊的背景颜色

Question

1. 我正在寻找一种方法/演示，以通过 jquery（与 jquery 兼容的跨浏览器。）制作额外密集的粗文本阴影。这可能 简单的 css 无法实现。 strong> 支持 IE

   虽然有多个阴影覆盖了它。但问题是我认为旧浏览器的兼容性问题。和 jQuery 涵盖了它。这就是为什么想要一个 jQuery 方式。

2. 简单的背景透明在css中很简单，但是使背景颜色也具有透明和模糊效果这样图片（或任何东西）最后面看不清楚

---

重要：

我需要跨浏览器的兼容性和对一些旧浏览器的支持，所以这就是我选择 jQuery 而不是 css 的原因

---

可能就像在 windows 7 的标题栏中一样？

我在过去看到了上述两个，但不幸的是我不记得在哪里。

如果有人知道方法或演示，我将不胜感激。

注意：我不想要基于 css 的背景或文本阴影。 我发现与我想要的有点接近的示例文本阴影。它的最小密度虽然是我想要的。

Answer 1

这显然是可能的，但仅在 WebKit 浏览器上，通过

-webkit-filter: blur(123px);
filter: blur(123px);

See this demo 并调整模糊属性。

Answer 2

实际上，使用简单的 CSS3 很容易做到这一点，只需将阴影叠加起来，使它们更加强烈。在某个地方可能是一个更好的解决方案，但这很好用并且很容易做到。此外，如果您使用 Less/Stylus，您可以使用它制作一个函数来更好地控制文本阴影强度。

.blur { color: black; text-shadow: 0 0 5pt black, 0 0 10pt black, 0 0 15pt black; }

至于背景模糊，我看到另一个答案已经解决了:)

Answer 3

这是一个带有堆叠阴影的 CSS 的跨浏览器实现！

.blur { 
    color: black;

    /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */
    text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1);

   /* The webkit implementations to support more SOME older browsers */
   -moz-text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1);
   -webkit-text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1);
   -khtml-text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1);
}

您可以使用逗号分隔的文本阴影列表来实现您所需要的。

关于DIV的模糊

发现了一些很棒的东西！

http://www.blurjs.com/

如果这不起作用，这里是堆栈溢出的答案。

Blur background of a div

此方法使用 HTML5，遗憾的是不兼容超旧浏览器。本质上，div 需要了解背景并在顶部覆盖该背景的模糊版本。