实现图片的变亮，变暗，灰白

时间 2019-11-07
标签实现图片变亮变暗灰白繁體版
原文原文链接
<style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
            float: left;
            margin-right: 10px;
        }
        img{
            display: block;
            -webkit-filter: grayscale(100%)
        }
        img {
        -webkit-filter: brightness(0.5);
        filter: brightness(1.5);
       }
       
     <!--图片变灰色的代码-->
    .gray {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
        <!--模糊-->
        filter: blur(9px);
        <!--对比色-->
         -webkit-filter: contrast(4.4);
         filter: contrast(4.4);
          /*饱和度*/
        -webkit-filter: saturate(3.6);
        filter: saturate(3.6);
        /*色相旋转*/
        filter: hue-rotate(185deg);
        /*阴影*/
        -webkit-filter: drop-shadow(0px 0px 5px #000);
        filter: drop-shadow(0px 0px 5px #000);
        /*褐色*/
        -webkit-filter: sepia(0.77);
        filter: sepia(0.77);
        }
    </style>
<body>
   <img src="./img/2.jpg" class="IMg">
   <a href="#" onclick="addBrightness()">＋</a>
   <a href="#" onclick="reduceBrightness()">－</a>
   <img src="./img/2.jpg" class="gray">
</body>
<script src="jquery.js"></script>
<script>
    //给图片一个初始亮度
    var brightVal = 0;
    // 点击加号的时候的函数
    function addBrightness() {
        brightVal = brightVal + 0.1;
        $(".IMg").css("-webkit-filter", "brightness(" + brightVal + ")");
        $(".IMg").css("filter", "brightness(" + brightVal + ")");
        //$(".logo_pic").addClass("bright");
    }
    // 点击减号的时候的函数
    function reduceBrightness() {
        brightVal = brightVal - 0.1;
        $(".IMg").css("-webkit-filter", "brightness(" + brightVal + ")");
        $(".IMg").css("filter", "brightness(" + brightVal + ")");
    }
</script>
复制代码