通过CSS模糊图像？

在许多智能手机（三星Galaxy II是一个例子），当你浏览照片库时，其模糊副本放在后台。 这是否可以通过CSSdynamic实现（即，没有预先保存的照片副本）？ 是否有任何一种复杂的CSS图像filter模糊图像？

Answer 1

你可以使用CSS3filter 。 他们相对容易实现，虽然只支持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); } 

Answer 3

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

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

Answer 4

是的，使用下面的代码将允许您将模糊效果应用于指定的图像，也可以让您select模糊的数量。

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

Answer 5

目前，CSS3filter只能在webkit浏览器（safari和chrome）中使用。

Answer 6

 img { filter: blur(var(--blur)); }