【css滤镜】高级属性filter

small_Axe

已于 2022-12-02 09:23:46 修改

阅读量414

点赞数

分类专栏： css 文章标签： css

于 2022-12-01 20:20:49 首次发布

本文链接：https://blog.csdn.net/houwhu/article/details/128134882

版权

1 篇文章 0 订阅

订阅专栏

2022年11月30日江老去世，然后我们发现各大网站和app首页都变成了灰色。还有一些特殊的日子，我们经常见到网站首页变灰色，作为一个前端开发者肯定会有好奇的同志，其实很简单，只要一个css属性就可以搞定，我们今天就介绍一下这个属性：滤镜 (filter)。

修改整个页面的颜色为黑白 (100% 灰度):

html {
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
}

在这里插入图片描述
注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 “filter” 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

tips: 滤镜可以多个组合使用，使用空格分隔多个滤镜。

默认值，没有效果。
示例：

// html
<div class="image_box">
  <img class="img" src="./image/zixia1.jpeg" alt="">
</div>

// css:
.image_box {
  width: 300px;
  height: 200px;
  .img {
  	width: 100%;
    height: 100%;
    filter: none;
  }
}

none

给图像设置高斯模糊，radius 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。若没有设置值，默认为 0。该参数可以指定为 CSS 长度，但不接受百分比值。
示例：

.image_box {
  width: 300px;
  height: 200px;
  .img {
    width: 100%;
    height: 100%;
    filter: blur(5px);
  }
}

在这里插入图片描述

调整图片亮度：给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
示例：

.image_box {
  width: 300px;
  height: 200px;
  .img {
    width: 100%;
    height: 100%;
    filter: brightness(200%);
  }
}

在这里插入图片描述

调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1.
示例：

.image_box {
  width: 300px;
  height: 200px;
  .img {
    width: 100%;
    height: 100%;
    filter: contrast(200%);
  }
}

在这里插入图片描述

 filter: contrast(50%);

在这里插入图片描述

drop-shadow (h-shadow v-shadow blur spread color)：给图像设置一个阴影效果
shadow 参数如下：

offset-x offset-y （必须）
这是设置阴影偏移量的两个 length 值。offset-x设定水平方向距离，负值会使阴影出现在元素左边。 offset-y 设定垂直距离，负值会使阴影出现在元素上方。如果两个值都是 0，则阴影出现在元素正后面。
blur-radius (可选)
这是第三个code，值越大越模糊，则阴影会变得更大更淡.不允许负值若未设定，默认是0 (则阴影的边界很锐利).
spread-radius (可选)
第四个参数，正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).
color (可选)
若未设定，颜色值基于浏览器。