css3 filter属性

过客尘烟

于 2021-03-03 21:23:56 发布

阅读量124

点赞数 1

分类专栏： html+css 文章标签： css3 html5 css

本文链接：https://blog.csdn.net/qq_41309350/article/details/114335404

版权

html+css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

原图
在这里插入图片描述
（1）灰度100%

    <style>
        img{
            width: 100px;
            height: 100px;
            filter: grayscale(100%);
        }
    </style>
</head>
<body>
 
   <img src="./img/f.PNG"/>
</div>

在这里插入图片描述
（2）褐度

  filter: sepia(50%);

在这里插入图片描述
（3）色相旋转

  filter: hue-rotate(60deg);

在这里插入图片描述
（4）反色

 filter: invert(100%);

在这里插入图片描述
（5）透明度

 filter: opacity(50%);

在这里插入图片描述

（6）亮度

  filter: brightness(80%);

在这里插入图片描述

（7）对比度

filter: contrast(250%);

在这里插入图片描述

（8）模糊度

  filter: blur(5px);

在这里插入图片描述
（9）饱和度

    filter: saturate(200%);

在这里插入图片描述
（10）阴影

   filter: drop-shadow(10px 5px 5px #f00)

在这里插入图片描述

过客尘烟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录