通过 CSS 模糊图像？答案

【问题标题】：Blurring an image via CSS?通过 CSS 模糊图像？
【发布时间】：2012-11-20 20:04:39
【问题描述】：

在许多智能手机（以三星 Galaxy II 为例）上，当您浏览照片库时，其模糊的副本会显示在背景中。这可以通过 CSS 动态实现吗（即，没有预先准备好的照片副本）？是否有任何复杂的 CSS 图像过滤器来模糊图像？

【问题讨论】：

【解决方案1】：

您可以使用CSS3 filters。它们相对容易实现，尽管目前仅在 webkit 上受支持。不过三星 Galaxy 2 的浏览器应该支持，因为我认为那是一个 webkit 浏览器？

【讨论】：

【解决方案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);

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

是的，使用以下代码可以让您对指定的图像应用模糊效果，还可以选择模糊量。

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：