58

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

4

6 回答 6

45

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

于 2012-12-03T11:05:04.057 回答
32

使用 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 演示

于 2014-01-19T11:59:05.577 回答
11

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

filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
于 2015-12-15T11:47:20.123 回答
2

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

img {
  -webkit-filter: blur(10px);
    filter: blur(10px);
}
于 2015-04-17T23:06:07.607 回答
0

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

于 2014-01-19T13:29:28.387 回答
0 
img {
  filter: blur(var(--blur));
}
于 2017-07-05T18:41:59.333 回答