CSS3 filter(濾鏡) 屬性的學習

原創 低调@低调 2020-03-26 10:41

filter(濾鏡) 屬性

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 450px;
        }
        
        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);
        }
        /* 
            調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。
            值可以超過100%，意味着會運用更低的對比。若沒有設置值，默認是1。
        */
        
        .contrast {
            -webkit-filter: contrast(180%);
            filter: contrast(180%);
        }
        /* 將圖像轉換爲灰度圖像 */
        
        .grayscale {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }
        /* 給圖像應用色相旋轉, 沒有最大值，超過360deg的值相當於又繞一圈。 */
        
        .huerotate {
            -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
        }
        /* 反轉輸入圖像 */
        .invert {
            -webkit-filter: invert(100%);
            filter: invert(100%);
        }
        /* 
            透明程度, 該函數與已有的opacity屬性很相似，
            不同之處在於通過filter，一些瀏覽器爲了提升性能會提供硬件加速。 
        */
        .opacity {
            -webkit-filter: opacity(50%);
            filter: opacity(50%);
        }
        /* 轉換圖像飽和度 */
        .saturate {
            -webkit-filter: saturate(7);
            filter: saturate(7);
        }
        /* 將圖像轉換爲深褐色, 值在0%到100%之間*/
        .sepia {
            -webkit-filter: sepia(100%);
            filter: sepia(100%);
        }
        /* 
            設置一個陰影效果 
            該函數與已有的box-shadow box-shadow屬性很相似；
            不同之處在於，通過濾鏡，一些瀏覽器爲了更好的性能會提供硬件加速。 
        */
        .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>


    <div>
        <img src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="blur" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="brightness" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="contrast" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="grayscale" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="huerotate" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="invert" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="opacity" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="saturate" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="sepia" src="pineapple.jpg" width="100" height="100">
    </div>
    <div>
        <img class="shadow" src="pineapple.jpg" width="100" height="100">
    </div>

</body>

</html>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Facebook 如何做大規模服務的自主測試

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

Paul Marinescu 2021-12-21 10:54:01

微軟終於被罵夠了？迴歸一鍵更改默認瀏覽器

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

闫园园 2021-12-07 11:58:59

使用HTML+CSS製作逼真的紅色開關

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

海拥(haiyong.site) 2021-12-04 14:03:52

JetBrains 發佈輕量級編輯器 Fleet

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-11-30 14:53:56

HTTP客戶端演進之路

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

尼先 2021-11-24 17:43:59

TypeScript 4.5 發佈，帶來 Promise 功能改進

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-11-19 11:23:57

手把手帶你玩轉 JS | 引航計劃｜大前端

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

三掌柜 2021-11-18 09:28:56

Flutter性能監控實踐

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"前言","attrs

贝壳大前端技术团队 2021-11-13 13:33:50

花7.5億都做不好的項目，被三位程序員爸爸重寫並開源了

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockq

Tina 2021-11-11 09:23:48

ShowMeBug 中如何科學的識別用戶瀏覽器？

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

ShowMeBug 2021-11-10 17:33:55

架構師（2021年11月）

卷首語：二十年老程序員的五條心得 作者：Justin Etheredge 1. 我懂的並不多 “你怎麼會不知道什麼是 BGP？”“你難道沒聽說過 Rust？” 類似的問題可能每天都會出現在我們面前。沒錯，投身於軟件行業的很多人之所以熱愛這份

InfoQ 中文站 2021-11-08 08:03:53

託管頁前端異常監控與治理實戰

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null

百度Geek说 2021-11-05 15:03:57

網易雲信陳功：體驗共享和無限融合是雲通信未來的進化方向丨QCon

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

张俊宝 2021-11-03 19:03:56

微軟產品經理：你不能不知道的6個Web開發者工具

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

Christian Heilmann 2021-11-03 16:08:56

貝殼Flutter瘦身實踐

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"背景","attrs

贝壳大前端技术团队 2021-11-03 10:33:58