css 给照片加滤镜

最新推荐文章于 2024-07-24 13:52:24 发布

WLJIAO

最新推荐文章于 2024-07-24 13:52:24 发布

阅读量334

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_43467284/article/details/108564991

版权

css 给照片加滤镜

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滤镜</title>
		<style type="text/css">
			img{
				width: 400px;
				height: 250px;
				display: block;
				margin: 0 auto;
				transition: all 3s;/*鼠标放上去恢复原效果，动画时间3秒*/	
			}
			img:hover{
				-webkit-filter: none;	
			}
			.img1{
				/*滤镜属性
				 * grayscale:设置灰度，1是百分之百，0是百分之零
				 * */
				-webkit-filter: grayscale(0.5);	
			}
			.img2{
				/*滤镜属性
				 * brightness:设置亮度，默认值是1，正常亮度,比1大曝光
				 * */
				-webkit-filter: brightness(0);	 
			}
			.img3{
				/*滤镜属性
				 * sepia:设置褐色属性，1为百分百褐色，0为默认正常
				 * */
				-webkit-filter: sepia(1);
			}
			.img4{
				/*滤镜属性
				 * blur:设置模糊度，单位是像素
				 * */
				-webkit-filter: blur(5px);
			}
			.img5{
				/*滤镜属性
				 * contrast:设置对比度，正常是1
				 * */
				-webkit-filter: contrast(0);
			}
			.img6{
				/*滤镜属性
				 * saturate:设置饱和度，正常是1
				 * */
				-webkit-filter: saturate(2);
			}
			.img7{
				/*滤镜属性
				 * invert:设置胶片底色效果
				 * */
				-webkit-filter: invert(1);
			}
			.img8{
				/*滤镜属性
				 * hue-rotate:设置色相旋转
				 * */
				-webkit-filter: hue-rotate(90deg);
			}
			
			.img9{
				/*实现图像慢慢画出来
				 * */
				-webkit-filter: blur(1px)brightness(60)grayscale(1);
			}
		</style>
	</head>
	<body>
		<img class="img0" src="../img/2.jpg" />
		<img class="img1" src="../img/2.jpg" />
		<img class="img2" src="../img/2.jpg" />
		<img class="img3" src="../img/2.jpg" />
		<img class="img4" src="../img/2.jpg" />
		<img class="img5" src="../img/2.jpg" />
		<img class="img6" src="../img/2.jpg" />
		<img class="img7" src="../img/2.jpg" />
		<img class="img8" src="../img/2.jpg" />
		
		<img class="img9" src="../img/2.jpg" />
	</body>
</html>

效果截图：

WLJIAO

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 给照片加滤镜

css 给照片加滤镜代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>滤镜</title> <style type="text/css"> img{ width: 400px; height: 250px; display: block; margin: 0 auto; transiti
复制链接

扫一扫