2021-02-24-CSDN博客

本文链接：https://blog.csdn.net/hanshuanga/article/details/114009597

CSS3 filter属性

今天来说说CSS3中的属性 filter(滤镜）

  首先得说一下这个属性的支持情况，旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性，iE几乎是不支持该属性的
  官方定义filter属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)；

<style>
         .box{
         	width: 200px;
         	height: auto;
         	margin: 100px auto;
         }
         .box .pic{
            filter: blur(3px);
         }
    </style>
</head>
<body>
	<div class="box">
        <img src="img/1.jpg" alt="">
        <img src="img/1.jpg" alt="" class='pic'>
	</div>
</body>

在这里插入图片描述
2.brightness(亮度)
让图片看起来更亮或者更暗，单位是百分比，也可以直接用数字表示，若是0%，则会全黑，若是100%，则是没有变化；超过100%之后，图片会更亮，默认是1；
3.contrast
调整图像的对比度。也可以用数字和百分比表示，值是0%的话，图像会全黑。值是100%，图像不变。值超过100%，意味着会运用更低的对比，若没有设置值，默认是1。
4.drop-shadow(x偏移(必选） y偏移(必选) 模糊范围扩展距离颜色）
给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，该属性值和box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速，X偏移：水平方向的距离，负值会让阴影出现在左面，Y偏移：垂直方向的距离，负值会让阴影出现在上方，如果两个值都是0, 则阴影出现在元素正后面，模糊距离，值越大越模糊，阴影会变得更大更淡.不允许负值，默认是0，扩展距离正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0，Webkit, 以及一些其他浏览器不支持第扩展距离，如果加了也不会渲染，最后一个可选参数是颜色
效果如下：

<style>
         .box{
         	width: 200px;
         	height: auto;
         	margin: 100px auto;
         }
         .box .pic{
            filter: drop-shadow(3px 5px 2px red);
         }
    </style>
</head>
<body>
	<div class="box">
        <img src="img/1.jpg" alt="">
        <img src="img/1.jpg" alt="" class='pic'>
	</div>
</body>

在这里插入图片描述 5.grayscale(灰度）
将图像转换为灰度图像。值定义转换的比例，100%则都转为灰色图像，值为0%没有变化，未设置，默认是0；
6.hue-rotate() 色相旋转
值为0deg，图像无变化，未设置默认就是0；
效果如下：

<style>
         .box{
         	width: 200px;
         	height: auto;
         	margin: 100px auto;
         }
         .box .pic{
            filter: hue-rotate(50deg);
         }
    </style>
</head>
<body>
	<div class="box">
        <img src="img/1.jpg" alt="">
        <img src="img/1.jpg" alt="" class='pic'>
	</div>
</body>

在这里插入图片描述
7. invert()反色
反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化，未设置默认为0
8.opacity(透明成度）
值0%则是完全透明，值为100%则图像无变化，与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
9.saturate
转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化，超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1，
10. sepia(褐色)
将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化,若未设置，值默认是0
11.url
URL函数接受一个XML文件，该文件设置了一个SVG滤镜