css 滤镜属性filter

最新推荐文章于 2023-10-31 17:31:32 发布

神奇大叔

最新推荐文章于 2023-10-31 17:31:32 发布

阅读量210

点赞数

分类专栏： css 文章标签： filter

本文链接：https://blog.csdn.net/weixin_43294560/article/details/105049781

版权

css 专栏收录该内容

64 篇文章 2 订阅

订阅专栏

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();


1　　grayscale灰度

2　　sepia褐色（有种复古的旧照片感觉）

3　　saturate饱和度

4　　hue-rotate色相旋转

5　　invert反色

6　　opacity透明度

7　　brightness亮度

8　　contrast对比度

9　　blur模糊

10　 drop-shadow阴影

sepia 褐色（有种复古的旧照片感觉）

filter:sepia(70%);

在这里插入图片描述

hue-rotate(色彩旋转)

filter:hue-rotate(330deg);

在这里插入图片描述

blur(模糊)

blur（模糊效果，单位px）

filter:blur(1px);

示例图片：

在这里插入图片描述

invert反色

 <style>
        .img{
            -webkit-filter:invert(100%);
        }
    </style>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>

示例图片：

在这里插入图片描述
brightness(%) 给图片应用一种线性乘法，使其看起来更亮或更暗。

img{
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}

在这里插入图片描述

contrast(%) 调整图像的对比度

img{
     -webkit-filter: contrast(180%);
     filter: contrast(180%); 
}

在这里插入图片描述
grayscale(%) 将图像转换为灰度图像

img{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

在这里插入图片描述
opacity(%)

filter: opacity(50%);

在这里插入图片描述
filter:saturate(%) 转换图像饱和度。

filter: saturate(7);

在这里插入图片描述

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 滤镜属性filter

CSS3中强大的filter(滤镜)属性博主最近在做网站的过程中发现了一个非常强大的CSS3属性，就是filter(滤镜)属性，喜欢p图的朋友看名字都应该知道这是什么神器了吧。当然，这个属性的效果肯定不能跟ps相比，但是利用的好的话可以在节约很多空间下，把一张图做成两张图的效果。1定义filter，从字面意思来看就是滤镜，官方定义filter属性定义了元素(通常是)的可视效果(例如：模糊与...
复制链接

扫一扫

专栏目录