2022/7/22

CSS3 Image Opacity 圖片透明效果是 CSS3 推薦的新功能，可以輕易的用來調整網頁中圖片的透明度，CSS3 Image Opacity 的圖片透明度設計技巧運用的是 CSS3 的 opacity 標準屬性，如果再加上 CSS 的 hover 動作判斷，可以製作出滑鼠移至圖片上方時，圖片自動產生透明度差異的特效，主流的新版瀏覽器都支援 CSS3 Image Opacity 圖片透明效果。

CSS3 Image Opacity 圖片透明效果範例一、單純的圖片透明度調整

<style>
#Img0{
    opacity: 1.0; //設為完全不透明
    filter: alpha(opacity=100); // IE8 與更早的版本
}
#Img1{
    opacity: 0.5; //透明度設為 0.5
    filter: alpha(opacity=50); // IE8 與更早的版本
}
</style>
<img src="圖片網址" id="Img0">
<img src="圖片網址" id="Img1">

範例呈現效果

 

範例一共準備了兩張圖片，左邊的圖片使用 CSS3 的 opacity 屬性並將透明度設為完全不透明，右邊的圖片則是相透明度設為 0.5，也可以說是半透明效果，另外，我們在 Img0 與 Img1 都使用 filter 屬性來讓較早期版本的 IE 瀏覽器能順利產生透明圖片效果。

➤ CSS3 opacity 的透明度範圍調整從 0.0~1.0 有不同的效果，詳細用法請參閱：CSS3 opacity 屬性 (透明效果)

CSS3 Image Opacity 圖片透明效果範例二、加入動作的透明度變化

<style>
#Img3{
    opacity: 0.5; //透明度設為 0.5
    filter: alpha(opacity=50); // IE8 與更早的版本
}
#Img3:hover{
    opacity: 1.0; //設為完全不透明
    filter: alpha(opacity=100); // IE8 與更早的版本
}
</style>
<img src="圖片網址" id="Img3">

範例呈現效果

範例二要做的是滑鼠移經圖片所產生的透明度變化效果，先將透明度設為半透明（opacity:0.5），再透過 CSS 的 hover 動作判斷功能，將透明度設為完全不透明（opacity:1.0），就能創造出滑鼠移經圖片所產生的透明度變化效果，這也是許多新的網頁設計會採用的技巧。