html学习笔记（二）

滤镜

一般用CSS filter属性来实现滤镜效果

1.使用范围：主要是应用在图片上，实现一些特效。
2.常用属性（默认值是：none）
（1） grayscale（设置灰度，1和默认是百分之百，0是百分之零）
（在body里面插入一张图片然后给图片设置滤镜效果）
代码如下（示例）：

.img{
			width: 400px;
			height: 400px;
    		-webkit-filter: grayscale(1);
			}

网页效果

（2）.sepia褐色（使用这个属性可以将图片做旧，同时，sepia没有参数值，将以百分之百渲染）
代码如下（示例）：

	.img{
				width: 300px;
				height: 300px;
				-webkit-filter: sepia();
			}

网页效果

（3）.saturate饱和度(saturat是用来改变图片的饱和度，默认值是百分之百）
代码如下（示例）

	.img{
				width: 300px;
				height: 300px;
				-webkit-filter: saturate(0.5);
			}
		

网页效果
饱和度为百分之五十

（4）.invert反色（胶片底色，默认值为百分之百）
代码如下（示例）：

.img{
				width: 300px;
				height: 300px;
				-webkit-filter: invert();
			}

网页效果
（此为默认值百分之百）
（5）.hue-rotate色相旋转（hue-rotate用来改变图片的色相 默认值：0deg）
代码如下（示例）：

.img{
				width: 300px;
				height: 300px;
				filter: hue-rotate(90deg);
			}

网页效果

（6）、opacity透明度（改变图片的透明度，默认值：100%）
代码如下（示例）：

.img{
				width: 300px;
				height: 300px;
				filter: opacity(0.3);
			}

网页效果（透明度为百分之三十）

（7）、brightness亮度（改变图片的亮度，默认值：100％）
代码如下（示例）：

.img{
				width: 300px;
				height: 300px;
				filter: brightness(0.3);
			}

网页效果（亮度为百分之三十）

（8）、 contrast对比度（改变图片的对比度，默认值：100％）
代码如下（示例）：

.img{
				width: 300px;
				height: 300px;
				filter: contrast(0.3);
			}

网页效果（设置为透明度百分之三十）

（9）.blur模糊(改变图片的清晰度，默认值：0)
代码如下（示例）：

.img{
				width: 300px;
				height: 300px;
				filter: blur(1px);
			}

网页效果

（10）. drop-shadow阴影（像box-shadow一样的效果，给图片加阴影效果， 写法:drop-shadow(5px 5px 5px #ccc);）

.img{
				width: 300px;
				height: 300px;
				filter: drop-shadow(8px 8px 6px #333);
			}

网页效果

总结

以上就是全部的内容，本文仅仅简单介绍了CSS filter属性的使用。