文章彙整

CSS 濾鏡特效

Astral WebBy Astral Web 3 years agoNo Comments
首頁  /  網站設計與開發  /  CSS 濾鏡特效

CSS 濾鏡特效

CSS 濾鏡是一個讓我們實現各種視覺效果的工具,我們可以利用CSS濾鏡來幫網頁加上一些視覺效果。 本文將為您介紹CSS的濾鏡效果及用法。

 

CSS 濾鏡共有十種特效,分別是:

  1. grayscale灰階
  2. sepia懷舊
  3. saturate飽和
  4. hue-rotate色相旋轉
  5. invert負片
  6. opacity不透明
  7. brightness亮度
  8. contrast對比
  9. blur模糊
  10. drop-shadow下拉陰影

grayscale灰階

讓圖片變成黑白圖片。可以使用0 – 1或是0% – 100%做為屬性值。

<img src="image.jpg" style="-webkit-filter:grayscale(1);">

 

sepia棕褐色效果

幫圖片加上棕褐色濾鏡、讓圖片瞬間變成老舊照片的感覺。可以使用0 – 1或是0% – 100%做為屬性值。

<img src="image.jpg" style="-webkit-filter:sepia(1);">

 

saturate飽和度

改變圖片的飽和度。可以使用數字或是百分比做為屬性值。1和100%代表不變,大於1和100%的值會讓圖片更加鮮明。

<img src="image.jpg" style="-webkit-filter:saturate(50%);">

 

hue-rotate色相旋轉

改變圖片的色相,將圖片中的所有顏色沿著色相環旋轉,改變整體的顏色。使用角度作為屬性質。

<img src="image.jpg" style="-webkit-filter:hue-rotate(90deg);">

 

invert負片

類似相片底片的負片效果,當屬性設為1或100%、圖片完全變成負片。

<img src="image.jpg" style="-webkit-filter:invert(100%);">

 

opacity不透明

改變圖片的透明度,0及0%表示完全透明,1及100%表示完全不透明、介於0 – 1或是0% – 100%的值則表示半透明。

<img src="image.jpg" style="-webkit-filter:opacity(50%);">

 

brightness亮度

改變圖片的亮度、0及0%表示全黑,1及100%表示不變、大於1或是100%則是增加圖片的亮度。

<img src="image.jpg" style="-webkit-filter:brightness(50%);">

 

contrast對比

調整圖片的對比度、可以使用數字或是百分比來調整。1及100%表示不變、小於1或是100%是減少圖片的對比度、大於1或是100%則是增加圖片的對比度。

<img src="image.jpg" style="-webkit-filter:contrast(200%);">

 

blur模糊

讓圖片產生模糊效果、使用時需加上長度的單位、例如px。

<img src="image.jpg" style="-webkit-filter:blur(3px);">

 

drop-shadow下拉陰影

為圖片加上陰影效果,可以產生不規則形狀的圖片。

<img src="puppy.png" style="-webkit-filter:drop-shadow(5px 5px 5px #369);">

如果我們想要同時使用二種以上的濾鏡效果、可以這樣子用

<img src="puppy.png" style="-webkit-filter:drop-shadow(5px 5px 5px #369) contrast(200%);">

歐斯瑞有限公司編寫製作

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。