zoukankan      html  css  js  c++  java
  • css3图片 变黑白 变模糊 调整饱和度等

    <!DOCTYPE html>
    <html>
    <head>
    <title>CSS3 filter(滤镜) 属性</title>
    <style>
    img {
         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>
    <img src="https://cn.vuejs.org/images/tooltwist.png" alt="Pineapple" width="300" height="300">
    <img class="blur" src="https://cn.vuejs.org/images/tooltwist.png" alt="Pineapple" width="300" height="300">
    <img class="brightness" src="https://cn.vuejs.org/images/tooltwist.png" alt="Pineapple" width="300" height="300">
    <img class="contrast" src="https://cn.vuejs.org/images/tooltwist.png" alt="Pineapple" width="300" height="300">
    <img class="grayscale" src="https://cn.vuejs.org/images/tooltwist.png" alt="Pineapple" width="300" height="300">
    <img class="huerotate" src="https://cn.vuejs.org/images/tooltwist.png" alt="Pineapple" width="300" height="300">
    <img class="invert" src="https://cn.vuejs.org/images/tooltwist.png" alt="Pineapple" width="300" height="300">
    <img class="opacity" src="https://cn.vuejs.org/images/tooltwist.png" alt="Pineapple" width="300" height="300">
    <img class="saturate" src="https://cn.vuejs.org/images/tooltwist.png" alt="Pineapple" width="300" height="300">
    <img class="sepia" src="https://cn.vuejs.org/images/tooltwist.png" alt="Pineapple" width="300" height="300">
    <img class="shadow" src="https://cn.vuejs.org/images/tooltwist.png" alt="Pineapple" width="300" height="300">
    
    </body>
    </html>
    
  • 相关阅读:
    一次硬盘安装debian的过程
    Java热替换
    Hibernate缓存
    Java消息机制
    Hibernate批量操作(一)
    SQLite与SQL差异
    tablelayout:fixed 在一些情况下 会导至width失效。
    heiht三种浏览器的写法
    [WebMethod(EnableSession = true)]
    10分钟学会基于ASP.NET的 JQuery实例 (转)
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924781.html
Copyright © 2011-2022 走看看