从微信聊天框开始学习CSS属性filter

CSS
前端
发布日期:   2022-06-18
文章字数:   951
阅读时长:   3 分
阅读次数:  

从微信聊天框开始学习CSS属性filter

前言

给别人发图片时，Ctrl+A选中图片发生了颜色反转。

下面重现一下

filter

至于为什么会联想到filter属性，主要是因为小时候经常玩手机的拍照功能，黑白滤镜、复古。。。

所以第一印象就是搜索CSS的滤镜属性，就找到了，所以来简单学习一下。(微信的那个具体怎么实现并不了解)

说是学习，但是其实就只是了解一下怎么使用而已。使用filter属性主要用法就是通过Filter函数来实现具体效果。

invert()

刚开始就先从实现遇到的反转先。invert()函数反转输入图像，参数是转换的比例，值为0%表示无变化，值为100%表示完全反转。

filter

超出100%之后也是和100%一样的效果。也就是说需要反转只需要设置CSS属性filter为invert(100%)即可，当然也不一定需要是100%。上面测试的是图像，但是实际上非图像该属性也是起作用的。

1
2
3
4
5
6
div {
    width: 200px;
    height: 200px;
    background-color: red;
    filter: invert(100%)
}

image-20220611222043656

上面的反转是不是很有意思。这是因为红色的rgb值为(255, 0, 0)，所以反转后的rgb值为(0, 255, 255)，即上面的效果。

实用技巧

我们可以给html元素添加filter: invert(100%)，即可实现切换亮暗模式。

1
document.documentElement.style.filter='invert(100%)'

filter

可以使用该方法开启黑暗模式看pdf文件的(虽然有一些地方会有点怪)

blur()

调整输入图像的模糊程度，参数可以设置为CSS长度(px、em等，不接受百分比)

image-20220612124521327

使用技巧

filter属性的blur()可以将模糊应用于元素。说到模糊，可能想到的应用就是自己制作一下有毛玻璃效果的背景图片了。接下来来耍一下。(在网上看到的效果，下面的例子也是参考网上的)

基本解构：

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url('https://i.loli.net/2019/11/17/GAYyzeKsiWjP5qO.jpg') no-repeat;
    background-size: cover;
}

.grass {
    position: fixed;
    top: 50px;
    width: 72vw;
    height: 36vh;
    box-shadow: 0 0.3px 0.7px rgb(0 0 0 / 13%), 0 0.9px 1.7px rgb(0 0 0 / 18%), 0 1.8px 3.5px rgb(0 0 0 / 22%), 0 3.7px 7.3px rgb(0 0 0 / 28%), 0 10px 20px rgb(0 0 0 / 40%);
}

html

1
2
3
<body>
    <div class="grass"></div>
</body>

image-20220612132534829

现在给grass盒子添加一下模糊度。

1
filter: blur(4px);

image-20220612132921567

但是结果和我们想象的不太一样，只有阴影有模糊。这是因为filter是将模糊等图形效果应用于元素，而后面的背景图片是该元素后面的body元素的，所以添加的模糊并不会添加到后面的背景图片中。

这时候，就轮到filter的好兄弟backdrop-filter登场了，它可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。值和filter的一样用法。

1
backdrop-filter: blur(4px);

image-20220612135449495

drop-shadow()

对输入图像应用阴影效果。(和box-shadow很相似，不过，在部分浏览器中通过filter可以提供硬件加速)

  • offset-x：设置阴影的水平偏移量

  • offset-y：设置阴影的垂直偏移量

  • blur-radius：设置阴影的模糊半径，值越大，越模糊，阴影也会更大、更淡

  • color：颜色

1
2
3
4
5
6
div {
    width: 200px;
    height: 200px;
    background-color: pink;
    filter: drop-shadow(4px 4px 6px black);
}

image-20220612151813219

复合函数

Filter函数可以任意组合来控制渲染。

1
2
3
4
5
6
div {
    width: 200px;
    height: 200px;
    background-color: red;
    filter: invert(100%) drop-shadow(4px 4px 6px black);
}

image-20220612152120004

filter属性还有很多很有意思的用法，可以设置对比度、灰度等。这里就不再过多赘述了，有想了解的可以到官方文档查阅。

文章作者: 赤蓝紫
文章链接: https://www.clzczh.top/2022/06/18/filter/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 赤蓝紫 !
CSS
评论
  目录