是否可以对 HTML 元素（div 和 img）应用模糊？
我只为 iPad 开发，所以跨浏览器兼容性不是问题，我可以使用 HTML5 CSS3 技术。
我知道如何模糊文本，但这个 CSS 不会模糊实际的 HTML 元素或其边框：
text-shadow: 0 0 8px #000;
color: transparent;
我用谷歌搜索了这个，但它并没有模糊我浏览器中的图像：
filter: blur(strength=50);
【问题讨论】：
标签： javascript html css
我今天看到一个很酷的教程，关于使用 CSS box-shadows、text-shadows、不透明度和颜色模糊内容。
这是演示：http://tympanus.net/Tutorials/ItemBlur/
还有教程：http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/
【讨论】：
Webkit 有一个名为 -webkit-filter 的属性，它允许使用模糊技术：-webkit-filter: blur(15px);
【讨论】：
您可以简单地将其添加到您的 css 中，以获得图像：
在以下示例中，您将使用半径为 5 像素的模糊。并且极其重要使用所有可用的供应商前缀，因此它适用于所有实现此功能的浏览器，直到它达到“稳定”版本。
img{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}
【讨论】：
filter:blur。
我认为最好的方法是将相同的图像叠加几次，然后在叠加的图像上测试不同的定位和不透明度。
这是我想出的 CSS。请记住，我使用的是 nth-child CSS3 选择器（但您似乎对此没有任何问题）：
img {
width:300px;
height:300px;
position:absolute;
opacity:0.2;
}
.container {
position:relative;
overflow:hidden;
width:300px;
height:300px;
}
img:nth-child(1) {
opacity:1;
}
img:nth-child(2) {
left:2px;
top:2px;
}
img:nth-child(3) {
left:-2px;
top:-2px;
}
img:nth-child(4) {
left:-1px;
top:-1px;
}
img:nth-child(5) {
left:1px;
top:1px;
}
HTML：
<div class="container">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
</div>
The result 很有前途。
【讨论】：
除了text-shadow 和box-shadow 的技术之外，CSS 没有模糊的能力。但即使有了这些，边界和图像也无法模糊。
不过，This JavaScript library 可以处理图片。
另外，您可能会发现这个technique 很有趣。这是使用预制模糊图像的巧妙错觉。
【讨论】：
不久前我不得不对这个问题进行彻底的研究，并提出了一个非常灵活的解决方案，尽管对于某些人的需求来说这可能有点过头了。我不仅需要模糊图像，还需要各种图像的动态模糊半径、叠加颜色和叠加不透明度。我还需要选择只模糊背景中的图像，并在其上覆盖其他元素。这是我能够创建的最佳跨浏览器（和高性能）解决方案。
首先，我手头有一个 SVG，名称为 blur.svg 并不令人鼓舞。它应用了模糊过滤器，如果仔细观察，stdDeviation（设置模糊半径）实际上是通过传入参数以编程方式设置到请求资产的 URL 的。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="#{params[:blur]}" />
</filter>
</svg>
然后我有一个 SCSS mixin，它允许向任何包装器添加模糊覆盖，具有可自定义的模糊半径、覆盖颜色和覆盖不透明度。
@mixin background_blurred($blur_radius:4, $overlay_color:white, $overlay_opacity:0.6) {
position: relative;
.background_blurred {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
filter: url('blur.svg#blur?blur=#{$blur_radius}');
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='#{$blur_radius}');
transform: translateZ(0);
&:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: $overlay_color;
opacity: $overlay_opacity;
}
}
.foreground {
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
}
您可能想知道为什么我添加了transform: translateZ(0);。唯一的效果是在渲染上强制硬件加速以保持性能。您可能还想知道为什么没有供应商前缀。如果你愿意，你可以在CanIUse 上查找filter 之类的东西，但我在这个项目上使用了autoprefixer 来替我担心这些事情。当然，为什么要使用这个 SVG 进行过滤，而不是像 blur(4px) 这样的东西呢？那不是更容易吗？会的，但 Firefox（截至撰写时）仅支持带有 URL 的 filter 属性。
然后您可以将模糊混合应用到包装类：
.my_wrapper_class {
@include background_blurred(3, #f9f7f5, 0.7);
}
请注意，对于此方法，我们必须使用在样式属性中设置自定义背景的类，而不是带有 src 的图像标签。您可以调整背景位置并根据自己的喜好覆盖背景大小。
<div class="my_wrapper_class">
<div class="background_blurred" style="background: url('URL OF IMAGE TO BLUR') no-repeat; background-position: 50% 0;"></div>
<div class="foreground">
<p>Stuff that should appear above the blurred background and not be blurred.</p>
</div>
</div>
【讨论】：
使用 CSS3，我们可以轻松调整图像。但请记住，这不会改变图像。它只显示调整后的图像。
在这里查看现场演示和完整的源代码
http://purpledesign.in/blog/adjust-an-image-using-css3-html5/
查看以下代码了解更多详情。
使图像变灰：
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
要呈现棕褐色外观：
img {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
}
调节亮度：
img {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
}
调整对比度：
img {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
模糊图像：
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}
【讨论】：