前端 CSS 实现滤镜效果

张浔不能停

2022-08-08 427 阅读2分钟

轻透几何风大字通知微信公众号首图.jpg

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

今天教给大家如何使用 CSS 添加滤镜的效果，本篇讲述的不深入，只为让你更快速的上手，同时最后会扩展大家去往哪个方向进行学习。

一、初识 CSS 滤镜

滤镜这两个字我相信大家都很熟悉，平时爱自拍，拍照的同学肯定都会打开滤镜修饰一下图片吧，那么CSS滤镜也是这样，直接用filter属性来修饰图像。

二、CSS 滤镜方法

blur()：模糊
- 可以任何长度单位，值为 0 显示原图，值越大越模糊
brightness()：亮度
- 百分比，可用 0~1 代替，值为 0 显示全黑，值为 100% 显示原图
contrast()：对比度
- 百分比，可用 0~1 代替，值为 0 显示全黑，值为 100% 显示原图

drop-shadow()：阴影

说明
- 与box-shadow属性类似
- 没有内阴影效果
- 不能阴影叠加

代码示例

/* 代码示例 */
<style>
    .box1 {
        width: 300px;
        height: 300px;
        border: 3px solid red;
        box-shadow: 5px 5px 10px 0 black;
    }

    .box2 {
        width: 300px;
        height: 300px;
        border: 3px solid red;
        filter: drop-shadow(5px 5px 10px black);
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

grayscale()：灰度
- 百分比，可用 0~1 代替，值为 0 显示原图，值为 100% 显示全灰
hue-rotate()：色相旋转
- 角度，值为 0 显示原图，值为 0~360deg 减弱原图色彩，
invert()：反相
- 百分比，可用 0~1 代替，值为 0 显示原图，值为 100% 完全反转原图色彩
opacity()：透明度
- 百分比，可用 0~1 代替，值为 0 显示透明，值为 100% 显示原图
saturate()：饱和度
- 百分比，可用 0~1 代替，值为 0 完全不饱和原图，值为 100% 显示原图
sepia()：褐色
- 百分比，可用 0~1 代替，值为 0 显示原图，值为 100% 显示褐色

三、CSS 滤镜的应用

3.1 CSS滤镜-将图片设置为灰色

代码示例

<style>
    .box {
        filter: grayscale(1);
    }
</style>

<body>
    <div class="box">
        <img src="./imgs/1.jpg" alt="">
    </div>
</body>

效果如下

结尾

感谢阅读，更详细的滤镜调制方法推荐大家去 CSSgram 的官网进行学习。