CSS：filter（滤镜）属性

news2024/9/23 23:26:28

用途

可以用于img标签，div标签等

图像，背景，边框的调整

常用属性

1. 灰度

grayscale()，默认是0，100%就是黑白

2. blux

给图像设置高斯模糊的程度，radius值设定高斯模糊的程序，表示像素点合并到一起的程度

不能使用百分比作为参数

3. brightness

调整图片的亮度，参数是百分比

0表示全黑，默认是100%

4. contract对比度

表示明暗的差距，值越小明暗的差距越大；值越大，亮的部分越亮，暗的部分越暗
参数为百分比，0%表示全灰

5. hue-rotate色相反转

参数是度数

超过360度就回来了

6. invert反转图片

参数是百分比
100%表示图片颜色反转

7. opacity图片透明度

参数是百分比

0表示完全透明，

8. saturate图片饱和度

参数是百分比，可以超过百分百，表示过饱和

9. sepia深褐色滤镜

老照片的滤镜

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link rel="stylesheet" href="filter.css">
	</head>
	<body>
		<!--黑夜发光图片的demo-->
		<div class="edgeLightDemo">
			<div class="outSection"></div>
		</div>
		
		
		<!--图片不同的效果-->
		<div class="img">
			<img src="filter.jpg" class="aaa">
			<img src="filter.jpg" class="bbb">
			<img src="filter.jpg" class="ccc">
			<img src="filter.jpg" class="ddd">
			<img src="filter.jpg" class="eee">
			<img src="filter.jpg" class="fff">
			<img src="filter.jpg" class="ggg">
			<img src="filter.jpg" class="hhh">
			<img src="filter.jpg" class="iii">
		</div>
	
	</body>
</html>

.edgeLightDemo {
    height: 700px;
    background-color: black;
    top: 0;
    display: flex;
    z-index: -2;
    position: relative;
}

/*body {*/
/*    background: black;*/
/*}*/

.outSection {
    width: 100px;
    height: 100px;
    margin: auto;
    background: linear-gradient(30deg, #144196, #655ad2);
    position: relative;
    /*父亲不设置定位层级*/
    border-radius: 20px;
}

/*在xxx之前新建元素*/
.outSection::before {
    content: "111";
    width: 120%;
    height: 120%;
    background: linear-gradient(30deg, #144196, #655ad2);
    /*不设置定位就会变成内联级元素*/
    /*加上定位就会放弃原来的空间，不受父亲的限制*/
    position: absolute;
    /*孩子设置定位层级为-1*/
    z-index: -1;
    left: -10%;
    top: -10%;
    filter: blur(10px);
}

.img {
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap;
}

.aaa {
    /*灰度*/
    filter: grayscale(50%);
}

.bbb {
    /*高斯模糊*/
    filter: blur(10px);
}

.ccc {
    /*亮度*/
    filter: brightness(150%);
}

.ddd {
    /*对比度*/
    filter: contrast(25%);
}

.eee {
    /*色相反转*/
    /*不是颜色反转，而是色相环上的反转*/
    /*加上红色/绿色/蓝色/紫色滤镜*/
    filter: hue-rotate(180deg);
}

.fff {
    /*颜色反转*/
    /*50%全灰*/
    /*100%完全反转*/
    filter: invert(100%);
}

.ggg {
    /*透明度*/
    filter: opacity(30%);
}

.hhh {
    /*饱和度*/
    /*可以超过100%*/
    filter: saturate(200%);
}

.iii {
    /*深褐色滤镜*/
    filter: sepia(150%);
}