CSS3的滤镜技术

最新推荐文章于 2024-08-30 08:59:35 发布

1900's 88 keys

最新推荐文章于 2024-08-30 08:59:35 发布

阅读量106

点赞数

分类专栏： # HTML/CSS 正在路上的前端攻城狮的烂笔记文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_45660621/article/details/121128438

版权

正在路上的前端攻城狮的烂笔记同时被 2 个专栏收录

90 篇文章 2 订阅

订阅专栏

HTML/CSS

20 篇文章 1 订阅

订阅专栏

CSS3的滤镜技术

在CSS3中提供了一中强大的滤镜技术，有了这项技术，对Photoshop软件的使用需求，就少了很多。
虽然CSS3的滤镜技术还是离Photoshop软件强大的系统有一定差距，但是也给开发人员提供了太多的使用空间。
在这里插入图片描述

常用的滤镜函数

模糊效果：blur（number）

模糊效果：blur(number),number越大图像越模糊

图像的亮度：brightness(number)

设置图像的亮度：brightness(number)，number越大图像越亮,number不能取负值。可以是整数也可以是百分比

图像的对比度：contrast(number)

阴影效果：drop-shadow(args1 args2 args3 args4)

阴影效果：drop-shadow(args1 args2 args3 args4)，作用类似CSS中的box-shadow属性

args1：阴影水平偏移量
args2：阴影的垂直偏移量
args3：阴影的模糊半径
args4：阴影的颜色

图像的灰度转换：grayscale(number)

图像反转：invert()

图像的不透明度：opacity()

图像转换为棕褐色：sepia()

图像的饱和度：saturate()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
            width: 200px;
            text-align: center;
            margin-left: 30px;
        }
        img {
            width: 100%;
        }
        div:nth-child(1)>img{
            filter: blur(5px);
        }
        div:nth-child(2)>img{
            filter: brightness(200%);
        }
        div:nth-child(3)>img{
            filter: contrast(200%);
        }
        div:nth-child(4)>img{
            filter: drop-shadow(10px 10px 5px skyblue);
        }
        div:nth-child(5)>img{
            filter: grayscale(100%);
        }

        div:nth-child(6)>img{
            filter: invert(100%);
        }
        div:nth-child(7)>img{
            filter: opacity(0.5);
        }
        div:nth-child(8)>img{
            filter: sepia(100%);
        }
        div:nth-child(9)>img{
            filter:saturate(300%);
        }


        
    </style>
</head>

<body>
    <div>
        <p>高斯模糊blur()</p>
        <img src="./images/火焰男神.png" alt="">
    </div>
    <div>
        <p>亮度brightness()</p>
        <img src="./images/火焰男神.png" alt="">
    </div>
    <div>
        <p>对比度contrast()</p>
        <img src="./images/火焰男神.png" alt="">
    </div>

    <div>
        <p>阴影效果drop-shadow()</p>
        <img src="./images/火焰男神.png" alt="">
    </div>
    <div>
        <p>灰度转换grayscale()</p>
        <img src="./images/火焰男神.png" alt="">
    </div>
    <div>
        <p>反转invert()</p>
        <img src="./images/火焰男神.png" alt="">
    </div>
    <div>
        <p>不透明度opacity()</p>
        <img src="./images/火焰男神.png" alt="">
    </div>

    <div>
        <p>转换为棕褐色sepia()</p>
        <img src="./images/火焰男神.png" alt="">
    </div> <div>
        <p>饱和度saturate()</p>
        <img src="./images/火焰男神.png" alt="">
    </div>

</body>

</html>

效果如下：
在这里插入图片描述

1900's 88 keys

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3的滤镜技术

CSS3的滤镜技术在CSS3中提供了一中强大的滤镜技术，有了这项技术，对Photoshop软件的使用需求，就少了很多。虽然CSS3的滤镜技术还是离Photoshop软件强大的系统有一定差距，但是也给开发人员提供了太多的使用空间。常用的滤镜函数模糊效果：blur（number）模糊效果：blur(number),number越大图像越模糊图像的亮度：brightness(number)设置图像的亮度：brightness(number)，number越大图像越亮,number不能取负值。可以是
复制链接

扫一扫

专栏目录