2017-12-22 2021/11/10

CSS3 透明度的使用方法

CSS3 其中有一項很特別功能 Opacity 也就是透明度，使用這個方法來製作許多效果。

程式語法：CSS3
語法作用：讓網頁元素調整透明度的值
使用語法<1>：opacity + 數值
使用語法<2>：background: rgba(0, 0, 0, .1); (紅色字改為 .1~1.0)

圖片透明化
背景透明化

圖片透明化

設定元素，調整透明度屬性 opacity 數值，例如：0.1~1.0（淺到深）。

.元素 { opacity:9; }

背景透明化

將底色的背景透明化

.div {background:#000; opacity:0.9; }

範例，請注意看原本底是黑色會跟著變透明，達成底色透明化。

範例使用 CSS3 語法為圖片加上圖說，請先觀看此篇：figure、figcaption

CSS
.img-opacity2{width:100%;}
.img-opacity2 figure{position: relative;float:left;width:48%;margin: 0px auto;padding:4px;}
.img-opacity2 figure img{width: 100%;margin:0px auto;border:none!important;}
.img-opacity2 figure figcaption{width:97.5%;margin:0px auto;padding: 0px;text-align:center;position:absolute;bottom: 11px;left: 0px;right: 0px;color:#fff;}

HTML
<div class=”img-opacity2″>
<figure><img src=”圖片網址” /><figcaption style=”background: #000; opacity: 0.3;“>0.3</figcaption></figure>
<figure><img src=”圖片網址” /><figcaption style=”background: #000; opacity: 0.9;“>0.9</figcaption></figure>
</div>

不過上述這種方式可能將整個元素（含文字）一起透明化，所以我們也可以使用第二種方法將背景底色修改為透明。

.元素 { background: rgba(0, 0, 0, 0.9); }

先來解釋一下什麼是 rgba(0, 0, 0, 0.9) 這項元素所代表的意思，rgba(red, green, blue,alpha) 也就是代表紅色(red)、green(綠色)、blue(藍色)、alpha(透明值)，所構成的一種色彩空間，在這裡我們使用 css 的方式指定 background 的顏色為 rgba(0, 0, 0, 0.9) 黑色，然後透明度為 0.9(0.1~1.0 由淺至深)。