• 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深褐色滤镜

    老照片的滤镜

    代码

    DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Titletitle>
		<link rel="stylesheet" href="filter.css">
	head>
	<body>
		
		<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    .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%);
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95

    效果

    模糊边框效果

    在这里插入图片描述

    图片效果

    在这里插入图片描述

  • 相关阅读:
    python+nodejs+vue考研辅导网站系统
    使用requests库进行网络爬虫：IP请求错误的解决方法
    springboot中@Async的使用
    java毕业设计网上拍卖系统源码+lw文档+mybatis+系统+mysql数据库+调试
    android 9 adb安装过程学习（一）
    （WebFlux）002、如何打印日志与链路ID
    C++入门教程（十一、宏）
    『忘了再学』Shell基础 — 20、Shell中的运算符
    MQ系列15：MQ实现批量消息处理
    探索C嘎嘎的奇妙世界:第三关---缺省参数与函数重载
  • 原文地址：https://blog.csdn.net/new_light123/article/details/137942554