css 滤镜_使用CSS滤镜效果进行图像调整

调整图像的亮度和对比度 ，或将图像转换为灰度或Sephia是您在图像编辑应用程序 （例如Photoshop）中可能会发现的常见功能。 但是，现在可以使用CSS向Web图像添加相同的效果。

此功能来自“ 滤镜效果” ，该效果实际上仍处于“工作草稿”阶段。 但是，Webkit浏览器似乎是实现此功能的第一步。

因此，让我们尝试一下，我们将使用Mehdi Kh的这张图片来演示效果。

效果

应用效果非常简单。 查看下面的代码片段，以将图像转换为grayscale ；

img {
	 -webkit-filter: grayscale(100%);
}

…这是针对sepia ala Instagram的 。

img {
	 -webkit-filter: sepia(100%);
}

也可以使图像变亮，我们可以通过使用brightness功能来实现，如下所示；

img {
	-webkit-filter: brightness(50%); 
}

亮度效果的作用类似于对比度和棕褐色效果，在该效果下， 0%的值将使图像保持原样，应用100%将使图像完全变亮，这可能只会显示空白的白页而不是图像。

亮度效果还允许使用负值 ， 使图像变暗 。

img {
	-webkit-filter: brightness(-50%); 
}

..我们可以通过这种方式调整图像对比度。

img {
	-webkit-filter: contrast(200%); 
}

值的工作方式也有一点差异，如您在上面所看到的，我们将contrast()设置为200% ，这是因为100%的值是图像保持不变的起点。 当该值低于100%时（例如50％），图像的对比度将降低。

此外，我们还可以将效果合并到一个声明块中，例如下面的示例。 我们将图像转换为grayscale并同时将contrast提高50％。

img {
	-webkit-filter: grayscale(100%) contrast(150%); 
}

通过将滤镜与CSS3过渡结合使用，我们可以实现优美的hover效果。

img:hover {
	-webkit-filter: grayscale(0%);
}
img:hover {
	-webkit-filter: sepia(0%); 
}
img:hover {
	-webkit-filter: brightness(0%); 
}
img:hover {
	-webkit-filter: contrast(100%); 
}

最后，我们可以尝试另一种效果； 高斯模糊 ，将使目标元素模糊。

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

像在Photoshop中一样，模糊值以像素半径表示，如果未明确指定该值，则将默认值设为0，图像保持原样。

最终思想

规范中实际上还有很多其他效果。 例如hue-rotate ， invert和saturate ，但我认为它们在实际的Web案例中应用较少。 因此，讨论仅限于四个效果。

而且，尽管该讨论已在本教程中应用于图像，但该属性实际上也可以应用于DOM中的任何元素。

最后，您可以从下面的这些链接查看实时演示。 请注意，当前仅在Chrome 19及更高版本中支持过滤器。

• 演示版
• 下载源

翻译自: https://www.hongkiat.com/blog/css-filter/