zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Spring-boot-admin功能说明
    Spring Boot Admin 的使用 2
    Spring Boot Admin的使用
    windows下的Nodejs及npm的安装、常用命令,Nodejs开发环境配置
    dataTables-使用详细说明整理
    JQuery Datatables Dom 和 Language 参数详细说明
    深入SpringBoot:自定义PropertySourceLoader
    java complier compliance level问题引发的思考
    在线代码格式化工具
    Gradle中的buildScript代码块
  • 原文地址:https://www.cnblogs.com/520BigBear/p/9929506.html
Copyright © 2011-2022 走看看