通过CSS模糊图像？

Question

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

Answer 1

您可以使用CSS3 filters。它们相对容易实现，但只在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 Demo

Answer 3

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

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

Answer 4

是的，使用以下代码将允许您将模糊效果应用于指定的图像，并且它还允许您选择模糊量。

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

Answer 5

CSS3过滤器目前仅适用于webkit浏览器（safari和chrome）。

Answer 6

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