css3 filter 滤镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:100%;
            height:100px;
            margin:10px;
            text-align:center
        }
        .div1 img{
            -webkit-filter:blur(1px);
            filter:blur(1px);
        }
        /*blur() 高斯模糊.接受一个css长度值作为参数,可以是 px/vw/vh/rem 等单位,唯独不能是%.值越大越模糊*/
        .div2 img{
            -webkit-filter:brightness(4.8);
            filter:brightness(4.8);
        }
        /*brightness() 亮度.使图片更亮或者更暗.参数为百分比,默认为1.当参数为0时,图片全黑;参数可以大于100%,也可以是小数点形式*/
        .div3 img{
            -webkit-filter: contrast(0.5);
            filter:contrast(0.5);
        }
        /*contrast() 对比度. 对比度是指一幅图片中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量,差异范围越大代表对比越大,差异越小代表对比越小*/
        .div4 img{
            -webkit-filter: saturate(300%);
            filter:saturate(300%);
        }
        /*saturate() 饱和度. 是图片变暗下来或者更鲜明.参数为百分比,默认为1,或者大于100%*/
        .div5 img{
            -webkit-filter: opacity(0.8);
            filter:opacity(0.8);
        }
        /*opacity() 透明度. 跟css3中的opacity属性效果是一致的,而使用filter,一些浏览器为了提升性能会提供硬件加速*/
        .div6 img{
            -webkit-filter: grayscale(1);
            filter:grayscale(1);
        }
        /*grayscale() 灰度级. 将图像转换为灰度图像.参数为百分比,默认为0.若设置100%,则完全转化为灰度图像*/
        .div7 img{
            -webkit-filter: hue-rotate(180deg);
            filter:hue-rotate(180deg);
        }
        /*hue-rotate() 色相旋转. 色相是色彩的首要特征.是区别各种不同色彩的最准确的标准.事实上任何黑白灰以外的颜色都有色相的属性,
        而色相也是由原色、间色和复杂色来构成的。hue-rotate()函数通过旋转角度对色相进行旋转从而改变图像在视觉上的效果.参数为度数deg
        */
        .div8 img{
            -wekbit-filter:invert(1);
            filter:invert(1);
        }
        /*invert() 反色. 反色又叫补色,红的补色是绿色,蓝的补色是橙色,黄的补色是紫色,由着三种对比关系可引出很多对比的反色.在画图程序中,
        反色操作是指把画面中的黑色变为白色,白色变为黑色,绿色变为红色,黄色变为紫色.参数为百分比,不能超过100%.
        */
        .div9 img{
            -webkit-filter: sepia(0.5);
            filter:sepia(0.5);
        }
        /*sepia() 将图像转化为深褐色,发黄发旧的效果,参数为百分比,默认为0,不超过100%*/

        .box1 img{
            -webkit-filter: grayscale(1);
            filter:grayscale(1);
            cursor:pointer;
        }
        .box1 img:hover{
            -webkit-filter:grayscale(0);
            filter:grayscale(0);
        }

        .box1{
            width:100%;
            height:auto;
            margin:10px;
            text-align:center;
        }

        .blur-box{
            position:relative;
            width:200px;
            height:150px;
            background:url("../images/bg0.jpg");
            padding-top:50px;
            background-size:100% 100%;
            z-index:-1;
            margin:0 auto;
        }
        .blur-img{
            position: relative;
            width:150px;
            height:80px;
            line-height:80px;
            padding:10px;
            margin:auto;
            color:#fff;
            overflow: hidden;
        }
        .blur-img:before{
            content:'';
            position:absolute;
            left:0;
            top:0;
            right:0;
            bottom:0;
            background:url("../images/bg0.jpg") no-repeat;
            background-position: -50px -50px;
            background-size:300px 200px;
            -webkit-filter: blur(5px);
            filter:blur(5px);
            z-index:-1
        }
    </style>
</head>
<body>
<div class="div1"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div2"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div3"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div4"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div5"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div6"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div7"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div8"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div9"><img src="../images/bg0.jpg" width="100" height="100"></div>
<hr/>
<center>常见案例</center>
<div class="box1">
    <h5>鼠标上移效果,默认为灰色,鼠标移动变为彩色</h5>
    <img src="../images/bg0.jpg" width="200" height="200">
</div>
<center>毛玻璃效果</center>
<div class="blur-box">
    <div class="blur-img">这是毛玻璃效果</div>
</div>
</body>
</html>
猜你喜欢
