通过 CSS 模糊图像？

Posted 2023-03-06

【中文标题】通过 CSS 模糊图像？

【英文标题】：Blurring an image via CSS?

【发布时间】：2012-11-20 20:04:39

【问题描述】：

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

【问题讨论】：

在这里你可以找到你所有的答案！ [CSS3][1] 就是方法！ (: [1]:inserthtml.com/2012/06/css-filters

请注意，虽然这可以通过 CSS3 'filter: blur(3px)' 实现，但目前在处理能力方面非常昂贵。

我的帖子被删除了。但这是原始链接thenewcode.com/534/Cross-browser-Image-Blur-with-CSS

blur filter on MDN

【参考方案1】：

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

【讨论】：

这有效，但不幸的是仅适用于 webkit。目前看来，如果您想在每个浏览器中获得相同的效果，可能唯一的方法是使用 Photoshop 模糊图像并将其作为背景。

【参考方案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

【讨论】：

@Raj 它有效。但这些效果中的每一种都只起作用一次。我的意思是当我应用模糊时，我不能应用亮度，反之亦然。我如何多次使用它们？>

内联就行了，像这样：filter: blur(2px) contrast(10%) so far等等..

演示链接已损坏。

IE都不支持这些

【参考方案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));