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>
    
  • 相关阅读:
    Linux学习40 运维必备技能-Linux软件包管理yum企业实战
    【Kafka】Kafka集群基础操作!新手上路必备~
    【Kafka】Kafka集群环境搭建
    【Kafka】消息队列相关知识
    【Hadoop离线基础总结】oozie的安装部署与使用
    【Hadoop离线基础总结】Hue与oozie集成
    【Hadoop离线基础总结】oozie定时任务设置
    【Hadoop离线基础总结】oozie任务串联
    【Hadoop离线基础总结】oozie调度MapReduce任务
    【Hadoop离线基础总结】oozie调度hive
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924781.html
Copyright © 2011-2022 走看看