HTML5學堂：在早期網頁要實現圖片的色相旋轉、灰色度的變化，只能用ie的濾鏡來實現。直到CSS3出來之後，可以用filter來實現了，接下來詳細的瞭解filter的使用

語法：

選擇器 {
filter: none  |  <filter-value> [ <filter-value> ]*
}

語法分析:

屬性值的歸納

none–預設值

grayscale（value）–灰度，value:0~1;

sepia（value）–褐色，value:0~1;

saturate（value）–飽和度，value:number;

hue-rotate（value）–色相旋轉，value:angle;

invert（value）–反色，value:0~1;

opacity（value）–透明度，value:0~1;

brightness（value）–亮度，value:0~1;

contrast（value）–對比度，value:number;

blur（value）–模糊，value:length;

drop-shadow（value）–陰影value:h-shadowv-shadowblur

效果實戰練習

我們需要不斷的實戰幫助我們去加深理解,因此我們需要知道filter是如何使用的

結構程式碼

<div class="h5course">
<img src="h5course.jpg">
</div>
 

樣式程式碼：

.h5course {
overflow: hidden;
position: relative;
width: 500px;
height: 500px;
}
.h5course img {
width: 100%;
}
.h5course span {
position: absolute;
top: 220px;
width: 100%;
height: 60px;
line-height: 60px;
background: rgba(0,0,0,0.5);
text-align: center;
font-family: "微軟雅黑";
font-size: 40px;
font-weight: bold;
color: #fff;
z-index: 2;
}
 

效果如下：

基本結構已經完成，接下來我們來實現以下的幾個效果

1. 灰色度 - grayscale

樣式程式碼：

.h5course img {
width: 100%;
-webkit-filter: grayscale(1);
}

效果如下：

咱們可以發現，圖片變成灰色了。大家可以改改值，看看有什麼變化。

2.復古 - sepia

樣式程式碼：

.h5course img {
width: 100%;
-webkit-filter: sepia(1);
}

效果如下：

3. 色相旋轉 - hue-rotate

樣式程式碼

.h5course img {
width: 100%;
-webkit-filter: hue-rotate(30deg);
}

效果圖如下

咱們修改hue-rotate的角度，可以看到圖片的顏色變了。其原理是：按照色相環進行旋轉，順時針方向，紅 - 橙 - 黃 - 黃綠 - 綠 - 藍綠 - 藍 - 藍紫 - 紫 - 紫紅 - 紅）此處為疊加黃色濾鏡。

4. 陰影 - drop-shadow

程式碼樣式

.h5course {
padding: 5%;
}
.h5course img {
width: 100%;
-webkit-filter: drop-shadow(5px 5px 5px #ccc);
}

效果如下

其實圖片陰影和盒陰影是一樣的，只是drop-shadow給圖片加的。

5. 自定義效果

樣式程式碼

.h5course img {
width: 100%;
-webkit-filter: saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);
}

效果如下

如上圖所示，我們可以知道filter是可以設定多個值的，每個值以空格隔開。

相容性：

目前來說，相容這個屬性的瀏覽器很少，只有webkit核心瀏覽器支援，因此在移動端上使用會比較廣泛