實現圖片的變亮，變暗，灰白

時間 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>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。