使用CSS在HTML中模糊Img和Div

Question

是否可以将模糊应用于HTML元素(div&img)？

我正在为iPad开发,因此跨浏览器兼容性不是问题,我可以使用HTML5 CSS3技术.

我知道如何模糊文本,但这个CSS不会模糊实际的HTML元素或其边框:

text-shadow: 0 0 8px #000;
color: transparent;

我用谷歌搜索了它,但它不会模糊我的浏览器中的图像:

filter: blur(strength=50);

Answer 1

今天我看到一个很酷的教程,关于使用CSS box-shadows,text-shadows,不透明度和颜色来模糊内容.

这是演示:http://tympanus.net/Tutorials/ItemBlur/

教程:http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

Answer 2

Webkit有一个称为-webkit-filter允许模糊技术的属性:-webkit-filter: blur(15px);

http://jsfiddle.net/danielfilho/KxWRA/

Answer 3

您可以将其添加到您的css中,以获取图像:

在以下示例中,您将使用半径为5像素的模糊.并且使用所有可用的供应商前缀非常重要,因此它可以在所有实现此功能的浏览器上运行,而不是"稳定"版本.

img{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}

Answer 4

我认为最好的方法是将同一张图像叠加几次，并在叠加的图像上测试不同的定位和不透明度。

这是我想出的CSS。请记住，我正在使用nth-childCSS3 选择器（但您似乎对此没有问题）：

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>

结果非常有希望。