CSS3中filter（滤镜）属性使⽤详解
最近在修改内⽹门户的时候，恰好遇到了需要使⽤滤镜的地⽅；刚开始⽤的是两张图⽚；⿏标滑过背景变成渐变；图标切换；但是后台配置了图标后；导致⿏标滑过图标不能正常切换；于是就想到了滤镜的效果来处理。所以顺便学习了⼀下常⽤的滤镜效果。
使⽤滤镜：
box shadow怎么设置
前⾔
css3的滤镜filter属性，可以对⽹页中的图⽚进⾏类似Photoshop图⽚处理的效果，通过css对图像进⾏处理。
浏览器⽀持情况：只有IE浏览器不⽀持filter（滤镜）属性，为了兼容低版本的safari和google浏览器，需要加上前缀-webkit-
。
常⽤属性
使⽤语法：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() |
saturate() | sepia() | url();
CSS 滤镜可以给同个元素同时定义多个，例如 filter: contrast(150%) brightness(1.5) ，但是滤镜的先后顺序不同产⽣的效果也
是不⼀样的；
默认值为： initial
inherit 表⽰从⽗级继承。
注意：滤镜通常使⽤百分⽐ (如：75%), 当然也可以使⽤⼩数来表⽰ (如：0.75)。
normal 正常
未添加滤镜
<div data-filter="image-normal">
<h2>normal</h2>
<img src="1.jpg">
</div>
grayscale 灰阶
将图像转换为灰度图像。值定义转换的⽐例。值为100%则完全转为灰度图像，值为0%图像⽆变化。若未设置，值默认是0。也可以写0-1之间的⼩数。
<div data-filter="image-grayscale">
<h2>grayscale</h2>
<img src="1.jpg">
</div>
//值为0-1之间的⼩数,  grayscale(0) 原图；grayscale(1）完全变成灰⾊；
[data-filter=image-grayscale] img {
filter: grayscale(50%);
-webkit-filter：grayscale(50%);  /* Chrome, Safari, Opera */
}
saturate 饱和度
值为0时显⽰⿊⽩⾊，值为0.5时饱和度为原图的⼀半，值为1时，表⽰饱和度等于原图，数值⼤于1表⽰饱和度加强。
//（值为0-1之间的⼩数）
<div data-filter="image-saturate">
<h2>saturate</h2>
<img src="1.jpg">
</div>
饱和对是对⾊彩的浓度（纯度）的定义。饱和度画⾯中⾊彩的鲜艳程度与层次；
[data-filter=image-saturate] img {
filter: saturate(360%);
-webkit-filter：saturate(360%); /* Chrome, Safari, Opera */
}
sepia 棕褐⾊
0表⽰褐⾊度为0%，显⽰原图，1 表⽰褐⾊度为100%显⽰褐⾊。
<div data-filter="image-sepia">
<h2>sepia</h2>
<img src="1.jpg">
</div>
[data-filter=image-sepia] img {
filter: sepia(100%);
-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
}
invert 反⾊
反转输⼊图像。值定义转换的⽐例。100%的价值是完全反转。值为0%则图像⽆变化。值在0%和100%之间，则是效果的线性乘⼦。若值未设置，值默认是0。
<div data-filter="image-invert">
<h2>invert</h2>
<img src="1.jpg">
</div>
[data-filter=image-invert] img {
filter: invert(100%);
-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
}
opacity 透明度
图像的透明程度。值为0%则是完全透明，值为100%则图像⽆变化。0-100%之间则是部分透明。也可以⽤0-1之间的⼩数替代%。与已有的opacity属性很相似，不同之处在于通过filter，⼀些浏览器为了提升性能会提供硬件加速。
<div data-filter="image-opacity">
<h2>opacity</h2>
<img src="1.jpg">
</div>
[data-filter=image-opacity] img {
filter: opacity(50%);
-webkit-filter: opacity(50%); /* Chrome, Safari, Opera */
}
brightness 亮度
使图⽚更亮或更暗。如果值是0%，图像会全⿊。值是100%，则图像⽆变化。值超过100%，图像会⽐原来更亮。如果没有设定值，默认是1。可以使⽤百分⽐也可以使⽤⼩数表⽰。
<div data-filter="image-brightness">
<h2>brightness</h2>
<img src="1.jpg">
</div>
[data-filter=image-brightness] img {
filter: brightness(120%);
-webkit-filter: brightness(120%); /* Chrome, Safari, Opera */
}
contrast 对⽐度
调整图像的对⽐度。值是0%的话，图像会全⿊。值是100%，图像不变。值超过100%，意味着会运⽤更低的对⽐。若没有设置值，默认是1。可以使⽤百分⽐也可以使⽤⼩数表⽰。对⽐度是对画⾯明暗程度的定义。对⽐度是指画⾯⿊⽩明暗的层次。
<div data-filter="image-contrast">
<h2>contrast</h2>
<img src="1.jpg">
</div>
[data-filter=image-contrast] img {
filter: contrast(160%);
-webkit-filter: contrast(160%); /* Chrome, Safari, Opera */
}
hue-rotate ⾊相旋转
给图像应⽤⾊相旋转。让图像中的颜⾊，在⾊相环中做对应的旋转。值为0deg，则图像⽆变化。若值未设置，默认值是
0deg。该值虽然没有最⼤值，超过360deg的值相当于⼜绕⼀圈。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。