通过CSS模糊图像？

Question

在浏览照片库时,许多智能手机(三星Galaxy II就是一个例子),它的模糊副本在后台布局.这可以通过CSS动态实现(即没有预先准备的照片副本保存)？是否有任何复杂的CSS图像过滤器来模糊图像？

Answer 1

您可以使用CSS3过滤器.它们相对容易实现,但只在webkit上支持.三星Galaxy 2的浏览器应该支持,因为我认为这是一个webkit浏览器？

Answer 2

使用CSS3,我们可以轻松调整图像.但请记住,这不会改变图像.它仅显示调整后的图像.

有关详细信息,请参阅以下代码.

要使图像变灰:

img {
 -webkit-filter: grayscale(100%);
}

给棕褐色看:

img {
 -webkit-filter: sepia(100%);
}

调整亮度:

img {
 -webkit-filter: brightness(50%);
}

调整对比度:

img {
 -webkit-filter: contrast(200%);
}

模糊图像:

img {
 -webkit-filter: blur(10px);
}

您也应该为不同的浏览器执行此操作.这包括所有css语句

  filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);

要使用多个

 filter: blur(5px) grayscale(1);

Codepen演示

Answer 3

此代码适用于所有浏览器的模糊效果.

filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);