如何使用CSS实现图像滤镜效果?

2019-07-21 19:46:00 2122 2 编辑:深正互联 来源:互联网

使用CSS filter属性,可以将类似Photoshop的滤镜效果应用于图像和内容;滤镜效果包括例如模糊效果,阴影,色彩变换和操作,如饱和/去饱和色等。该filter属性定义了元素(通常是<img>)的可视效果,此属性主要用于图像内容。


如何使用CSS实现图像滤镜效果?

filter属性是将过滤器效果应用于web页面上的元素(主要是图像)的CSS方法。


filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|

         opacity()|saturate()|sepia()|url();

通过将多个过滤器函数传递给filter属性,可以将多个过滤器应用于元素;函数是空格分隔的。


例:


img {

   filter: brightness(20%) blur(20px);

}

此示例将两个过滤器函数应用于网页中的图像元素。


Filter 函数


注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。


● none:这是默认值,不适用任何效果。


● brightness():设置元素的亮度。如果亮度为0%则为全黑,如果亮度为100%,则与原始亮度相同。大于100%结果的值是更明亮的元素。


● grayscale():设置元素的灰度,它将元素颜色转换为黑色和白色。灰度0%表示原始元素,100%表示完全灰度元素。


● sepia():它将图像转换为棕褐色图像,其中0%表示原始图像,100%表示完全棕褐色。


● contrast():用于调整元素的对比度。0%对比度表示完整的黑色元素,100%对比度表示原始元素。


● saturate():用于设置元素的饱和度。0%饱和度表示元素完全不饱和,100%饱和表示原始图像。大于100%结果的值是超饱和元素。


● blur():它将模糊效果应用于元素。如果未指定模糊值,则默认值为0。


● opacity():它设置图像的不透明度效果。0%不透明度表示元素完全透明,如果不透明度为100%,则表示原始图像。


● hue-rotate():它将色调旋转应用于图像。该值定义将调整图像样本的色环周围的度数。默认值为0deg,表示原始图像;该值虽然没有最大值,超过360deg的值相当于又绕一圈。


● invert():它反转元素。默认值为0%,表示原始图像。100%使图像完全反转。


● drop-shadow():它对元素应用阴影效果。它接受h-shadow,v-shadow,blur,spread和color作为值。


● url():接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。


示例:


<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<style type="text/css">

img{

width: 200px;

}

.img1{

/*没有滤镜效果*/

-webkit-filter: none; /*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */

filter: none;

}

.img2{

/*元素的亮度*/

-webkit-filter: brightness(30%);/*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */

filter: brightness(30%);

}

.img3{

/*元素的灰度*/

-webkit-filter: grayscale(80%);/*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */

filter: grayscale(80%);

}

.img4{

/*将图像转换为棕褐色图像*/

-webkit-filter: sepia(50%);/*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */

filter: sepia(50%);

}

.img5{

/*调整元素的对比度*/

-webkit-filter: contrast(30);/*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */

filter: contrast(30);

}

.img6{

/*元素的饱和度*/

-webkit-filter: saturate(50);/*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */

filter: saturate(50);

}

.img7{

/*模糊效果*/

-webkit-filter: blur(2px); /*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */

filter: blur(2px);

}

.img8{

/*不透明度效果*/

-webkit-filter: opacity(30%);/*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */

filter: opacity(30%);

}

.img9{

/*色调旋转*/

-webkit-filter:hue-rotate(55deg); /*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */

filter: hue-rotate(55deg);

}

.img10{

/*反转元素*/

-webkit-filter: invert(20); /*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */

filter: invert(20); 

}

.img11{

/*反转元素*/

-webkit-filter: drop-shadow(16px 18px 15px rgba(255, 0, 0, 0.5));  

/*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */

filter: drop-shadow(16px 18px 15px rgba(255, 0, 0, 0.5)); 

}

</style>

</head>

<body>

<div class="demo">

<img src="1.jpg" class="img1"/>

<img src="1.jpg" class="img2"/>

<img src="1.jpg" class="img3"/>

<img src="1.jpg" class="img4"/>

<img src="1.jpg" class="img5"/>

<img src="1.jpg" class="img6"/>

<img src="1.jpg" class="img7"/>

<img src="1.jpg" class="img8"/>

<img src="1.jpg" class="img9"/>

<img src="1.jpg" class="img10"/>

<img src="1.jpg" class="img11"/>

</div>

</body>

</html>

效果图:

如何使用CSS实现图像滤镜效果?

以上就是如何使用CSS实现图像滤镜效果哦。

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询 微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询