CSS奇技淫巧之滤镜

·  阅读 140
 CSS奇技淫巧之滤镜

「这是我参与11月更文挑战的第二天,活动详情查看:2021最后一次更文挑战」。

前言

CSS3的出现,给我们带来很多很多神奇的东西,其中一个非常酷炫的功能就是filter

image.png

上图的高斯模糊的效果就是通过filter实现的。接下来让我看看他的神奇之处吧。GO GO Go!!!

filter

我们先来一张原图

image.png

好酷的,有没有。简直酷的一批。=͟͟͞͞ʕ•̫͡•ʔ

// html
<img class="filter" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90294544a3c944e5b2c2c6c174fdb57f~tplv-k3u1fbpfcp-zoom-1.image">

复制代码

blur

使图片达到高斯模糊的效果。参数可以指定为 CSS 长度,但不接受百分比值。传入的数值表示屏幕上有多少像素相互融合,传入的数值越大,图像越模糊,反之,图像越清晰,默认值是0.

// css
.filter {
    filter:blur(10px);
}
复制代码

image.png

brightness

可以使图片变亮或者变暗,参数为 0%(0)时全黑。参数为 100%(1) 图像不变。参数大于 100%(1)时提高图片亮度。默认值是 1。

// css
.filter {
    filter:brightness(0.4);
}
复制代码

image.png

// css
.filter {
    filter:brightness(1.4);
}
复制代码

image.png

contrast

调整图片的对比度,参数为 0%(0)时全黑。参数为 100%(1) 图像不变。参数大于 100%(1)时提高图片亮度。默认值是 1。`

// css
.filter {
    filter: contrast(0.6);
}
复制代码

image.png

// css
.filter {
    filter: contrast(1.6);
}
复制代码

image.png

真的很酷也,感没感觉到,帅炸了!(^o^)

好,今天就到这里了,今天努力的你依然是最棒的。Bye Bye!!!

分类:
前端
标签:
分类:
前端
标签: