CSS:filter(滤镜)属性

用途

可以用于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深褐色滤镜

老照片的滤镜

代码

html 复制代码
<!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>
css 复制代码
.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%);
}

效果

模糊边框效果

图片效果

相关推荐
qq_3901617726 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js