[[377055]]

上篇文章，我們介紹了CSS3濾鏡效果的模糊效果、設(shè)置圖像高度、調(diào)整圖像對(duì)比度、向圖像添加陰影等知識(shí)，這篇文章緊承上篇文章，我們重點(diǎn)介紹下CSS3濾鏡效果的將圖像轉(zhuǎn)換為灰度、在圖像上應(yīng)用色相旋轉(zhuǎn)、對(duì)圖像應(yīng)用不透明度知識(shí)。

四、向圖像添加陰影

可以使用該drop-shadow()功能將陰影效果應(yīng)用于Photoshop等圖像。

此功能類似于該box-shadow屬性。

例：

<style> 
img { 
width: 200px; 
height: 100px; 
} 
 
img.shadow { 
-webkit-filter: drop-shadow(2px 2px 4px orange); 
/* Chrome, Safari, Opera */ 
filter: drop-shadow(2px 2px 4px orange); 
} 
 
img.shadow-large { 
-webkit-filter: drop-shadow(4px 4px 10px orange); 
/* Chrome, Safari, Opera */ 
filter: drop-shadow(4px 4px 10px orange); 
} 
 
/* Some CSS to beautify this example */ 
table td { 
padding: 10px; 
text-align: center; 
} 
</style> 

運(yùn)行結(jié)果：

注意：drop-shadow()函數(shù)的第一個(gè)和第二個(gè)參數(shù)分別指定陰影的水平和垂直偏移，而第三個(gè)參數(shù)指定模糊半徑，最后一個(gè)參數(shù)指定陰影顏色，就像該box-shadow屬性一樣，但有一個(gè)例外，' inset'不允許使用關(guān)鍵字。

五、將圖像轉(zhuǎn)換為灰度

使用此grayscale()功能可以將圖像轉(zhuǎn)換為灰度。值100%完全是灰度。值0%保留圖像不變。之間的值0%并且100%是在效果線性乘法器。如果缺少數(shù)量參數(shù)，則使用值0。

例：

img.complete-gray { 
   -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ 
   filter: grayscale(100%); 
} 
img.partial-gray { 
   -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */ 
   filter: grayscale(50%); 
} 

運(yùn)行效果：

六、在圖像上應(yīng)用色相旋轉(zhuǎn)

該hue-rotate()功能在圖像上應(yīng)用色相旋轉(zhuǎn)。傳遞的參數(shù)定義了將調(diào)整圖像樣本的色環(huán)周圍的度數(shù)。值0deg保留圖像不變。

如果angle缺少' '參數(shù)，0deg則使用值。沒有最大值，上面的值的效果會(huì)360deg回繞。

例：

<style> 
img { 
width: 200px; 
height: 100px; 
} 
 
img.hue-normal { 
-webkit-filter: hue-rotate(150deg); 
/* Chrome, Safari, Opera */ 
filter: hue-rotate(150deg); 
} 
 
img.hue-wrap { 
-webkit-filter: hue-rotate(480deg); 
/* Chrome, Safari, Opera */ 
filter: hue-rotate(480deg); 
} 
 
/* Some CSS to beautify this example */ 
table td { 
padding: 10px; 
text-align: center; 
} 
</style> 

運(yùn)行效果：

七、對(duì)圖像應(yīng)用不透明度

opacity()功能可用于為圖像添加透明度。值0%表示是完全透明的，值100%或1保持表示圖像不變。之間的值0%并且100%是在效果線性乘法器。如果缺少' amount'參數(shù)，則使用值1。此功能類似于該opacity屬性。

例：

img { 
   -webkit-filter: opacity(80%); /* Chrome, Safari, Opera */ 
   filter: opacity(80%); 
} 

運(yùn)行結(jié)果：

八、總結(jié)

本文基于CSS基礎(chǔ)，通過案例，詳細(xì)的講解了 CSS3濾鏡的屬性的使用方法。如何去設(shè)置圖像的亮度，對(duì)比度，添加相應(yīng)的陰影效果、改變圖像的不透明度。這幾個(gè)方面通過運(yùn)行后效果圖的展示，讓讀者更直觀，更簡(jiǎn)單易懂。

代碼很簡(jiǎn)單，希望文章的內(nèi)容能夠幫助更好的學(xué)習(xí)。

本文轉(zhuǎn)載自微信公眾號(hào)「 前端進(jìn)階學(xué)習(xí)交流」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號(hào)。