filter滤镜效果(css3属性)

时间：2023-03-09 17:41:55
filter滤镜效果(css3属性)

filter滤镜效果(css3属性)

<!DOCTYPE html>

<html>

    <head>

    <style>

    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);}

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

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

    .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}

    .invert {-webkit-filter: invert(100%);filter: invert(100%);}

    .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}

    .saturate {-webkit-filter: saturate(7); filter: saturate(7);}

    .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}

    .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>

    <img src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="blur" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="brightness" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="contrast" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="grayscale" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="huerotate" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="invert" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="opacity" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="saturate" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="sepia" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="shadow" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

</body>

</html>

wc3 链接  http://www.runoob.com/cssref/css3-pr-filter.html

相关文章