css3的滤镜

最新推荐文章于 2024-01-16 21:03:31 发布

迪卢克的现任

最新推荐文章于 2024-01-16 21:03:31 发布

阅读量187

点赞数 1

分类专栏： css 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/m0_53644435/article/details/120996686

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、滤镜是什么？

对图像、图像进行的视觉处理(模糊、饱和度、对比度等)

二、滤镜的实现：filter属性

1.模糊效果：

blur(number),number越大图像越模糊

2.设置图像的亮度

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

3.图像的对比度

contrast(number)number越大图像对比度越高

4.阴影效果

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

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

<!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>
</head>
<style>
    img
    {
        width: 300px;
    }
    #d1{
        -webkit-filter: blur(2px);
        filter: blur(2px);
        
    }
    #d2{
        filter: brightness(2);
       
    }
    #d3{
        filter: contrast(1.5);
       
    }
    #d4{
        filter: drop-shadow(4px 4px 10px rgb(100, 2, 2));
    }
 

</style>
<body>
    <img id="d1" src="../images/diluc (10).jpg" alt="">
  
    <!-- <br> -->
    <img id="d2" src="../images/diluc (10).jpg" alt="">
    
    <img id="d3" src="../images/diluc (10).jpg" alt="">
  
    <img id="d4" src="../images/diluc (10).jpg" alt="">

</body>
</html>

效果如下：

5.其他属性

滤镜函数	描述
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>
</head>
<style>
    img
    {
        width: 300px;
    }
 
    #d5{
        filter: grayscale(50%);
    }
    #d6{
        filter: invert(80%);
    }
    #d7{
        filter: opacity(50%);
    }
    #d8{
        filter: sepia(80%);
    }
    #d9{
        filter: saturate(2);
    }

</style>
<body>


    <img id="d5" src="../images/diluc (10).jpg" alt="">

    <img id="d6" src="../images/diluc (10).jpg" alt="">
    <img id="d7" src="../images/diluc (10).jpg" alt="">
    <img id="d8" src="../images/diluc (10).jpg" alt="">
    <img id="d9" src="../images/diluc (10).jpg" alt="">
</body>
</html>

效果如下：

值得注意的是一个图片只能有一种滤镜效果，在写下下一个滤镜效果后回覆盖上面的滤镜效果。

例如先写下图像饱和度的效果在写下图像模糊效果之表现出图像的模糊效果；

#d9{
        filter: saturate(2);
        filter: blur(2px);
    }

迪卢克的现任

关注

1
点赞
踩
0

收藏

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

目录一、滤镜是什么？二、滤镜的实现：filter属性1.模糊效果：2.设置图像的亮度3.图像的对比度4.阴影效果5.其他属性一、滤镜是什么？对图像、图像进行的视觉处理(模糊、饱和度、对比度等)二、滤镜的实现：filter属性1.模糊效果：blur(number),number越大图像越模糊2.设置图像的亮度brightness(number)，number越大图像越亮,number不能取负值。可以是整数也可以是百分比 3.图像的对比度...
复制链接

扫一扫