滤镜

最新推荐文章于 2024-05-19 21:56:01 发布

吃素的黑猫

最新推荐文章于 2024-05-19 21:56:01 发布

阅读量113

点赞数

分类专栏： Web开发——HTML(css) 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_44645934/article/details/108561580

版权

Web开发——HTML(css) 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

滤镜

filter :属性定义了元素(通常是<img>)的可视效果

滤镜属性
         1. grayscale() 灰度:1是百分之百，0是百分之0.
   2. brightness() 亮度:1是默认值，正常亮度.
3. sepia() 褐色:1是百分之百，正常为0.
4. blur() 模糊度:单位像素.
5. contrast() 对比度:正常是1，调成0是灰色.
6. invert() 胶片底色效果:正常是0.
7. hue-rotate()    色相旋转:角度.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>滤镜</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				margin: auto;
				width:810px;
				height: auto;
			}
			div{
				margin:0px  10px;
				width:250px ;
				float: left;
			}
			div>span{
				margin: 5px ;
				text-align: center;
				font-weight: bold;
			}
			.img{
				display: block;
				width: 250px;
				float: left;
			}
		    /*.img:hover{
		    	transition: all 3s;
		    }*/
		    span{
		    	margin: auto;
		    	display: block;
		    }
		    div:nth-child(1)>img{
		    	/*滤镜属性
		    	 * grayscale() 灰度:1是百分之百，0是百分之0
		    	 */
		    	-webkit-filter: grayscale(1);
		    }
		     div:nth-child(2)>img{
		    	/*滤镜属性
		    	 * brightness() 亮度:1是默认值 ，正常亮度
		    	 */
		    	-webkit-filter: brightness(2);
		    }
		    div:nth-child(3)>img{
		    	/*滤镜属性
		    	 * sepia() 褐色:1是百分之百 ，正常为0
		    	 */
		    	-webkit-filter: sepia(1);
		    }
		    
		     div:nth-child(4)>img{
		    	/*滤镜属性
		    	 * blur() 模糊度:单位像素
		    	 */
		    	-webkit-filter: blur(2px);
		    }
		     div:nth-child(5)>img{
		    	/*滤镜属性
		    	 * contrast() 对比度:正常是1，调成0是灰色
		    	 */
		    	-webkit-filter: contrast(0.5);
		    }
		     div:nth-child(6)>img{
		    	/*滤镜属性
		    	 * invert() 胶片底色效果:正常是0，
		    	 */
		    	-webkit-filter: invert(1);
		    }
		     div:nth-child(7)>img{
		    	/*滤镜属性
		    	 * hue-rotate 色相旋转:角度，
		    	 */
		    	-webkit-filter: hue-rotate(270deg);
		    }
		     div:nth-child(8)>img{
		    	/*滤镜属性
		    	 * 混合特效
		    	 */
		    	-webkit-filter: hue-rotate(180deg) brightness(2);
		    }
		      div:nth-child(9)>img{
		    	/*滤镜属性
		    	 * 混合特效
		    	 */
		    	-webkit-filter: sepia(1) brightness(2);
		    }
		</style>
	</head>
	<body>
		<div>
			<img src="img/img.jpg" alt="" class="img" />
			<span>灰度</span>
		</div>
		<div>
			<img src="img/img.jpg" alt="" class="img" />
			<span>亮度</span>
		</div>
		<div>
			<img src="img/img.jpg" alt="" class="img" />
			<span>褐色</span>
		</div>
		<div>
			<img src="img/img.jpg" alt="" class="img" />
			<span>模糊度</span>
		</div>
		<div>
			<img src="img/img.jpg" alt="" class="img" />
			<span>对比度</span>
		</div>
		<div>
			<img src="img/img.jpg" alt="" class="img" />
			<span>胶片底色</span>
		</div>
		<div>
			<img src="img/img.jpg" alt="" class="img" />
			<span>色相旋转</span>
		</div>
		<div>
			<img src="img/img.jpg" alt="" class="img" />
			<span>色相旋转 亮度</span>
		</div>
		<div>
			<img src="img/img.jpg" alt="" class="img" />
			<span>褐色 亮度</span>
		</div>
	</body>
</html>

吃素的黑猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滤镜

滤镜filter :属性定义了元素(通常是<img>)的可视效果滤镜属性 1. grayscale() 灰度:1是百分之百，0是百分之0. 2. brightness() 亮度:1是默认值，正常亮度. 3. sepia() 褐色:1是百分之百，正常为0. 4. blur() ...
复制链接

扫一扫