189 8069 5689

 
normal
 

 
grayscale
 

//（值为0-1之间的小数）

 
saturate
 

饱和对是对色彩的浓度（纯度）的定义。饱和度画面中色彩的鲜艳程度与层次；

[data-filter=image-saturate] img {
  filter: saturate(360%);
  -webkit-filter：saturate(360%); /* Chrome, Safari, Opera */
}

sepia 棕褐色

0表示褐色度为0%，显示原图，1 表示褐色度为100%显示褐色。

 
sepia
 


[data-filter=image-sepia] img {
  filter: sepia(100%);
  -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
}

invert 反色

反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

 
invert
 


[data-filter=image-invert] img {
  filter: invert(100%);
  -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
}

opacity 透明度

图像的透明程度。值为0%则是完全透明，值为100%则图像无变化。0-100%之间则是部分透明。也可以用0-1之间的小数替代%。与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

 
opacity
 


[data-filter=image-opacity] img {
  filter: opacity(50%);
  -webkit-filter: opacity(50%); /* Chrome, Safari, Opera */
}

brightness 亮度

使图片更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。值超过100%，图像会比原来更亮。如果没有设定值，默认是1。可以使用百分比也可以使用小数表示。

 
brightness
 


[data-filter=image-brightness] img {
  filter: brightness(120%);
  -webkit-filter: brightness(120%); /* Chrome, Safari, Opera */
}

contrast 对比度

调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值超过100%，意味着会运用更低的对比。若没有设置值，默认是1。可以使用百分比也可以使用小数表示。 对比度是对画面明暗程度的定义。对比度是指画面黑白明暗的层次。

 
contrast
 


[data-filter=image-contrast] img {
  filter: contrast(160%);
  -webkit-filter: contrast(160%); /* Chrome, Safari, Opera */
}

hue-rotate 色相旋转

给图像应用色相旋转。让图像中的颜色，在色相环中做对应的旋转。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

 
hue-rotate
 


[data-filter=image-hue-rotate] img {
  filter: hue-rotate(160deg);
  -webkit-filter: hue-rotate(160deg); /* Chrome, Safari, Opera */
}

blur 模糊

给图像设置高斯模糊。值越大越模糊，默认是0，就是不模糊。

 
blur
 



[data-filter=image-blur] img {
  filter: blur(2px);
  -webkit-filter: blur(2px); /* Chrome, Safari, Opera */
}

drop-shadow 阴影

与 box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。

 
blur
 


[data-filter=drop-shadow] img {
  filter: drop-shadow(16px 16px 20px blue);
  -webkit-filter: drop-shadow(16px 16px 20px blue); /* Chrome, Safari, Opera */
}

对比box-shadow

添加阴影属性。

 
blur
 


/* 添加阴影效果*/
[data-filter=box-shadow] img {
  box-shadow:16px 16px 20px blue;
  -webkit-filter:box-shadow:16px 16px 20px blue; /* Chrome, Safari, Opera */
}

box-shadow和drop-shadow 还是有区别的；效果上看 box-shadow 是给整个图片加阴影，而 drop-shadow 只是给不透明的部分加阴影 。

multiple 多个滤镜效果

 
blur
 


/*调整按钮和图片的亮度和对比度*/
[data-filter=multiple-filter] img {
   filter: contrast(175%) brightness(3%);
   -webkit-filter: contrast(175%) brightness(3%);/* Chrome, Safari, Opera */
}

融合效果

/* blur 混合 contrast 产生融合效果 */
.filter-mix {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    filter: contrast(20);
    background: #fff;
}
.filter-mix::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #333;
    top: 40px;
    left: 40px;
    z-index: 2;
    filter: blur(6px);
    box-sizing: border-box;
    animation: filterBallMove 4s ease-out infinite;
}

.filter-mix::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #3F51B5;
    top: 60px;
    right: 40px;
    z-index: 2;
    filter: blur(6px);
    animation: filterBallMove2 4s ease-out infinite;
}

@keyframes filterBallMove {
    50% {
        left: 140px;
    }
}

@keyframes filterBallMove2 {
    50% {
        right: 140px;
    }
}

火焰效果

filter: contrast() 与 filter: blur() 和animation 配合制作火焰效果。

filter: blur(20px) contrast(30);

animation: move 2s infinite 0.2s linear;

scss滤镜样式

$filters: (
 grayscale: '(50%)',//灰阶
 saturate: '(360%)',//饱和度
 sepia: '(100%)',//棕褐色
 invert: '(100%)',//反色
 opacity: '(50%)',//透明度
 brightness: '(120%)',//亮度
 contrast: '(160%)',//对比度
 hue-rotate: '(160deg)', //色相旋转
 blur: '(2px)',//模糊  
 drop-shadow:'drop-shadow(16px 16px 20px blue)',//阴影
);

@each $type, $value in $filters {
 [data-filter="image-#{$type}"] {
  img {
       filter: #{$type}#{$value};
  }
 }
}

以上是“CSS3中filter属性的使用方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！