Css3 filter(滤镜)_html/css_WEB-ITnose
css3的filter滤镜效果,filter是W3C CSS filter Effect 1.0中定义的滤镜效果,一个使用CSS来改变图片的模糊度、亮度、对比度、饱和度等等效果的过滤器。
index.html中的代码如下:
style.css中样式设置为:
其中,background-attachment属性用于定义背景图片随滚动轴的移动方式,取值: scroll | fixed | inherit:
下面就要正式进入filter滤镜效果的展示:
(1)filter:blur(模糊度)
在style.css文件中加入filter属性:
blur(模糊度),数值越大,图片会变得越模糊,效果如下图所示:
原图 效果图
(2)filter:brightness(亮度)
brightness值从(-1~1),值越大亮度越大,效果对比如下:
原图 效果图
(3)filter:saturate(饱和度)
饱和度以100%作为中间值,饱和度大于100%,饱和度小于100%,效果图如下:
饱和度为30% 饱和度为150%
(4)filter:sepia(怀旧)
filter:sepia(100%);参数范围(0%~100%)效果对比如下:
原图 效果图
(5)filter:grayscale(灰度)
filter:grayscale(50%); (参数范围0%~100%),效果对比如下;
原图 效果图
(6)filter:invert(反相)
filter:invert(80%);参数设置范围(0%~100%),效果图如下:
原图 效果图
(7)filter:hue-rotate(色相)
取值范围为0度到360度,效果如下:
原图 效果图
(8)filter:contrast(对比度),100%为中间取值
效果如下:
原图 效果图
至此,filter所有的参数效果已经介绍完毕,希望对大家有所帮助。
下一篇: JavaScript趣题:缺水危机
推荐阅读
-
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
-
CSS3 滤镜 webkit-filter详细介绍及使用方法
-
通过css3的filter滤镜改变png图片的颜色的示例代码
-
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
-
CSS3 中filter(滤镜)属性使用详解
-
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
-
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
CSS3之圆角_html/css_WEB-ITnose
-
css3中的content和实体_html/css_WEB-ITnose