CSS3 filter(滤镜) 属性的学习

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>

在这里插入图片描述

发布了123 篇原创文章 · 获赞 137 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览