css3 filter屬性給圖片添加毛玻璃模糊效果執行個體介紹

記錄下項目中關於圖片模糊效果的處理，要求：背景圖必須通過img標籤傳入，而且頭像要做成圓形的

樣本圖片：

HTML代碼：

<div class="introBox">    <!--個人頭像-->    <div class="imgShow">        <img class="imgBground" src="resources/images/1.jpg" alt="">        <ul class="details">            <li class="smallImg">                <img class="roundImg" src="resources/images/1.jpg" alt="">            </li>            <li><p class="uname">呂良偉</p></li>            <li><p class="cellPhone">13218888888</p></li>        </ul>    </div></div>

CSS代碼：

/*背景圖模糊效果*/.imgBground{    width:100%;    height:28vh;    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */    -webkit-filter: blur(5px); /* Chrome, Opera */    -moz-filter: blur(5px);    -ms-filter: blur(5px);    filter: blur(5px);    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false); /* IE6~IE9 */}.details{position:absolute; left:0; right:0; top:8%; margin:auto;}/*調整個人資訊的位置*/.smallImg{width:100px; height:100px; margin:2% auto; overflow:hidden;}/*把頭像處理成圓形*/.roundImg{display:block;width:100px; height:100px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}

關於CSS3 filter(濾鏡) 屬性，手冊是這麼介紹的

亮度Brightness

Brightness濾鏡用於控製圖片的亮度，參數接受的值為 大於或等於0，0%則輸出為純黑色，100%輸出為映像原本的亮度，大於100%的時候則可以增益圖片的亮度，比如150%，即將亮度提升1.5倍

HTML：

<div id="container">    <img class="imgA" src="images/1.jpeg" alt="">    <img class="imgB" src="images/1.jpeg" alt=""></div>

CSS：

#container{width:600px; height:800px;}#container img{width:200px;}.imgB{    filter:brightness(150%); /*firefox*/    -webkit-filter:brightness(150%);/*chrome, safari, opera*/}

（支援Chrome，Firefox，Opera，Safari，不支援IE任何版本）

對比Contrast

Contrast濾鏡用來控製圖片的對比，像亮度濾鏡一樣，參數接受的值大於或等於0，該濾鏡控制在CSS映像的深色和淺色部分之間的差異。因此，設定0%是灰色，100%是原始映像，大於100%進一步增益圖像的對比

CSS：

.imgA{    filter:contrast(80%);    -webkit-filter:contrast(80%);}.imgB{    filter:contrast(150%);    -webkit-filter:contrast(150%);}

灰階Grayscale

Grayscale濾鏡用於控製圖片的灰階，這個濾鏡逐漸將我們的映像中的所有色彩轉換成一些灰色的陰影，設定0%沒有效果，100%會變成全灰，不允許出現負值

CSS：

.imgA{    filter:grayscale(30%); /*firefox*/    -webkit-filter:grayscale(30%);/*chrome, safari, opera*/}.imgB{    filter:grayscale(80%); /*firefox*/    -webkit-filter:grayscale(80%);/*chrome, safari, opera*/}

飽和度Saturate

Saturate濾鏡控製圖像的色彩飽和度，設定0%將徹底從映像中刪除所有的顏色，設定100%看起來就像原始映像，而超過100%則將使映像飽和，不允許出現負值

CSS：

.imgA{    filter:saturate(30%); /*firefox*/    -webkit-filter:saturate(30%);/*chrome, safari, opera*/}.imgB{    filter:saturate(150%); /*firefox*/    -webkit-filter:saturate(150%);/*chrome, safari, opera*/}

褐色Sepia

Sepia濾鏡用於控製圖片的褐色色調，就是說把圖片調成複古風格的老照片效果，設定0%為原始映像，設定100%為老照片效果

CSS：

.imgA{    filter:sepia(50%); /*firefox*/    -webkit-filter:sepia(50%);/*chrome, safari, opera*/}.imgB{    filter:sepia(100%); /*firefox*/    -webkit-filter:sepia(100%);/*chrome, safari, opera*/}

色相旋轉Hue-rotate

Hue-rotate濾鏡適用於色相旋轉到映像的所有顏色。設定0deg時沒有效果，取值沒有最大值，取值超過360deg時就相當於一個迴圈，也就是說取值90deg和450deg的效果是一樣的

CSS：

.imgA{    filter:hue-rotate(90deg); /*firefox*/    -webkit-filter:hue-rotate(90deg);/*chrome, safari, opera*/}.imgB{    filter:hue-rotate(150deg); /*firefox*/    -webkit-filter:hue-rotate(150deg);/*chrome, safari, opera*/}

反色Invert

Invert濾鏡反轉所有顏色，反轉的量取決於設定的值，設定0%的時候沒有反轉，設定100%的時候則反轉所有的顏色

CSS：

.imgA{    filter:invert(60%); /*firefox*/    -webkit-filter:invert(60%);/*chrome, safari, opera*/}.imgB{    filter:invert(90%); /*firefox*/    -webkit-filter:invert(90%);/*chrome, safari, opera*/}

模糊Blur

Blur濾鏡適用於高斯模糊的映像，把顏色混合在一起，並分布在映像的邊緣上。傳遞給此過濾器的半徑參數來確定螢幕上的交融互進多少像素。取值越大，模糊效果越明顯，這個濾鏡可以接受任何長度值，除了百分比

CSS：

.imgA{    filter:blur(1px); /*firefox*/    -webkit-filter:blur(1px);/*chrome, safari, opera*/}.imgB{    filter:blur(0.5em); /*firefox*/    -webkit-filter:blur(0.5em);/*chrome, safari, opera*/}

透明度Opacity

Opacity濾鏡使映像變透明，取值0%時，完全透明；取值100%時，完全不透明。這個濾鏡跟已知的opacity屬性相似，唯一的區別就是效能，opacity濾鏡屬性在支援硬體加速的瀏覽器上效能會更好

CSS：

.imgA{    filter:opacity(25%); /*firefox*/    -webkit-filter:opacity(25%);/*chrome, safari, opera*/}.imgB{    filter:opacity(75%); /*firefox*/    -webkit-filter:opacity(75%);/*chrome, safari, opera*/}

陰影Drop Shadow

Drop Shadow濾鏡增加了一個陰影製作效果，此屬性需要X和Y的位移，以及隱隱的顏色，也可以設定一個模糊半徑

CSS：

.imgA{    filter:drop-shadow(5px 5px 10px #666); /*firefox*/    -webkit-filter:drop-shadow(5px 5px 10px #666);/*chrome, safari, opera*/}.imgB{    filter:drop-shadow(10px 10px 10px #eee); /*firefox*/    -webkit-filter:drop-shadow(10px 10px 10px #eee);/*chrome, safari, opera*/}

URL()

雖然我們討論過的所有的濾鏡非常有用，他們其實是通用的濾鏡，但是你的項目可能需要更多的效果，如果上面濾鏡沒有能滿足你的要求的，你可以建立自己的SVG濾鏡然後使用其id通過url()引用。

HTML:

<div id="container">    <img class="imgA" src="images/1.jpeg" alt="">    <img class="imgB" src="images/1.jpeg" alt=""></div> <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">    <filter id="greenish">        <feComponentTransfer>            <feFuncR type="linear" slope="2" intercept="-0.5"/>            <feFuncG type="linear" slope="2" intercept="-0.1"/>            <feFuncB type="linear" slope="2" intercept="-0.25"/>        </feComponentTransfer>    </filter>    <filter id="bluish">        <feComponentTransfer>            <feFuncR type="linear" slope="2" intercept="-0.5"/>            <feFuncG type="linear" slope="2" intercept="-0.1"/>            <feFuncB type="linear" slope="2" intercept="0"/>        </feComponentTransfer>    </filter></svg>

CSS:

.imgA{    filter: url('#greenish');    -webkit-filter: url('#greenish');}.imgB{    filter:url('#bluish');    -webkit-filter: url('#bluish');}

組合濾鏡和動畫濾鏡(Combining and Animating Filters)

您也可以組合多個濾鏡來獲得各種效果。在大多數情況下，濾鏡的順序並沒有多大關係。但是如果在灰階濾鏡後再加上一個褐色濾鏡，還是會顯示一個灰階映像。

CSS:

.imgB{    -webkit-animation: haunted 3s infinite;    animation: haunted 3s infinite;} @keyframes haunted {    0% {        -webkit-filter: brightness(20%);        filter: brightness(20%);    }    48% {        -webkit-filter: brightness(20%);        filter: brightness(20%);    }    50% {        -webkit-filter: sepia(1) contrast(2) brightness(200%);        filter: sepia(1) contrast(2) brightness(200%);    }    60% {        -webkit-filter: sepia(1) contrast(2) brightness(200%);        filter: sepia(1) contrast(2) brightness(200%);    }    62% {        -webkit-filter: brightness(20%);        filter: brightness(20%);    }    96% {        -webkit-filter: brightness(20%);        filter: brightness(20%);    }    96% {        -webkit-filter: brightness(400%);        filter: brightness(400%);    }

（有動態效果，但是的緣故，只能看靜態了）