CSS3 filter(滤镜) 属性的学习

最新推荐文章于 2022-07-26 15:01:57 发布

~嘘~禁止想象~

最新推荐文章于 2022-07-26 15:01:57 发布

阅读量256

点赞数 1

分类专栏： # HTML5 and CSS3 前端

本文链接：https://blog.csdn.net/weixin_45773503/article/details/105107698

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

HTML5 and CSS3

22 篇文章 0 订阅

订阅专栏

filter(滤镜) 属性

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 450px;
        }
        
        img {
            width: 33%;
            height: auto;
            float: left;
        }
        /* 高斯模糊, 值越大越模糊, 但不接受百分比值 */
        
        .blur {
            -webkit-filter: blur(4px);
            filter: blur(4px);
        }
        /* 使图像看起来更亮或更暗 */
        
        .brightness {
            -webkit-filter: brightness(0.30);
            filter: brightness(0.30);
        }
        /* 
            调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。
            值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
        */
        
        .contrast {
            -webkit-filter: contrast(180%);
            filter: contrast(180%);
        }
        /* 将图像转换为灰度图像 */
        
        .grayscale {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }
        /* 给图像应用色相旋转, 没有最大值，超过360deg的值相当于又绕一圈。 */
        
        .huerotate {
            -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
        }
        /* 反转输入图像 */
        .invert {
            -webkit-filter: invert(100%);
            filter: invert(100%);
        }
        /* 
            透明程度, 该函数与已有的opacity属性很相似，
            不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。 
        */
        .opacity {
            -webkit-filter: opacity(50%);
            filter: opacity(50%);
        }
        /* 转换图像饱和度 */
        .saturate {
            -webkit-filter: saturate(7);
            filter: saturate(7);
        }
        /* 将图像转换为深褐色, 值在0%到100%之间*/
        .sepia {
            -webkit-filter: sepia(100%);
            filter: sepia(100%);
        }
        /* 
            设置一个阴影效果 
            该函数与已有的box-shadow box-shadow属性很相似；
            不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。 
        */
        .shadow {
            -webkit-filter: drop-shadow(8px 8px 10px green);
            filter: drop-shadow(8px 8px 10px green);
        }
    </style>
</head>

<body>

    <p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>


    <div>
        <img src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="blur" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="brightness" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="contrast" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="grayscale" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="huerotate" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="invert" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="opacity" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="saturate" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="sepia" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="shadow" src="pineapple.jpg" width="100" height="100">
    </div>

</body>

</html>

在这里插入图片描述

~嘘~禁止想象~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 filter(滤镜) 属性的学习

filter(滤镜) 属性<!DOCTYPE html><html><head> <style> div { width: 450px; } img { width: 33%; height: au...
复制链接

扫一扫