css3 filter濾鏡

阿新 • • 發佈：2019-01-31

css3濾鏡用法

elem{
    filter: none | <filter-function > [ <filter-function> ]*
}

多個濾鏡可以疊加使用，中間用空格隔開

CSS3 的10中濾鏡

十種效果分別是：
1. blur 模糊 - 值為 ?px，指的是模糊半徑
2. graysacle 灰度 - 值為 0~1
3. sepia 褐色值 0~1
4. invert 反轉顏色值為 0~1
5. opacity 透明度值為 0~1
6. contrast 對比度值為 number
7. saturate 飽和度值為 number
8. brightness 亮度值為 number
9. hue-rotate 色相旋轉值為 angle
10. drop-shadow 語法跟其他css shadow語法相同

效果圖（左側原圖，右側濾鏡效果圖）

blur
opacity

opacity

grayscale

grayscale

sepia

sepia

saturate

saturate

brightness

brightness

contrast

contrast

invert

invert

hue-rotate

hue-rotate

drop-shadow

drop-shadow

本來看網上說支援的瀏覽器不多而且只有webkit瀏覽器支援。所以在寫濾鏡是要新增 -webkit-字首筆者嘗試在win10 edge瀏覽器同樣已經支援而且可以些 -webkit-字首，也可以不寫。不禁感慨edge確實不是以前頗為讓人詬病的ie了。

所使用瀏覽器版本：
1. chrome 52.0.2743.116 m
2. Microsoft Edge 38.14393.0.0

十種濾鏡組合起來，嘖嘖，效果不敢想

附上demo,可以自己複製，然後分別註釋顯示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Filter</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    .box{
        height: 600px;
        width:300px;
        margin 
:40px auto;
        border:3px solid #ccc;
        border-radius:30px;

    }
    .contain{
        height:450px;
        width:300px;
        margin:70px auto 0;
        box-sizing: border-box;
        /*這裡的url請自己替換*/
        /*background: url('pics/filter.jpg') center/280px 430px no-repeat border-box;*/
        background: url('pics/filter.jpg') center/cover no-repeat border-box;
        /*模糊 */
        /*-webkit-filter:blur(10px);*/
        /* 灰度*/
        -webkit-filter:grayscale(1);
        /* 褐色*/
        /*-webkit-filter:sepia(1);*/
        /* 飽和度*/
        /*-webkit-filter:saturate(3);*/
        /* 色相旋轉*/
        /*-webkit-filter:hue-rotate(90deg);*/
        /* 顏色反轉*/
        /*-webkit-filter:invert(1);*/
        /* 透明度*/
        /*-webkit-filter:opacity(.4);*/
        /* 對比度*/
        /*-webkit-filter:contrast(2);*/
        /* 亮度*/
        /*-webkit-filter:brightness(2);*/
        /* 陰影*/
        /*-webkit-filter:drop-shadow(10px 10px 2px #ccc);*/
    }
    .circle{
        height: 50px;
        width:50px;
        border:3px solid #ccc;
        border-radius:50%;
        margin:12px auto;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="contain"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

css3 filter濾鏡

css3濾鏡用法

CSS3 的10中濾鏡

效果圖（左側原圖，右側濾鏡效果圖）

css3 filter 濾鏡

CSS3 filter濾鏡屬性小專案——圖片高斯模糊、高亮、對比度、灰度、色調、色彩旋轉、透明、飽和、褐色調整

css: CSS3 filter(濾鏡) 的使用

css3 filter濾鏡

CSS3 filter(濾鏡用法)

HTML5----CSS3圖片濾鏡(filter)特效

css中的filter濾鏡和js中的filter方法

css3屬性濾鏡詳解

IE中CSS-filter濾鏡小知識大全

position：relative解決filter濾鏡問題

CSS3濾鏡filter: blur,使圖片或背景模糊(毛玻璃)

css3的filter（濾鏡）屬性

CSS3濾鏡

css3濾鏡效果

Filter:revealtrans　濾鏡效果

CSS技巧收集——毛玻璃效果（深入理解濾鏡filter）

CoreImage中濾鏡filter的屬性

firefox對css3濾鏡-----模糊相容

css3濾鏡-模糊Blur濾鏡

filter IE濾鏡（Internet Explorer）CSS

css3 filter濾鏡

css3濾鏡用法

CSS3 的10中濾鏡

效果圖（左側原圖，右側濾鏡效果圖）

相關推薦