模糊通过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);

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

0
投票

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