CSS 教學

CSS3 透明度的使用方法

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

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

圖片透明化

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

.元素 { opacity:9; }
CSS3 透明度的使用方法
opacity:0.1
CSS3 透明度的使用方法
opacity:0.2
CSS3 透明度的使用方法
opacity:0.3
CSS3 透明度的使用方法
opacity:0.4
CSS3 透明度的使用方法
opacity:0.5
CSS3 透明度的使用方法
opacity:0.6
CSS3 透明度的使用方法
opacity:0.7
CSS3 透明度的使用方法
opacity:0.8
CSS3 透明度的使用方法
opacity:0.9
CSS3 透明度的使用方法
opacity:1.0

背景透明化

將底色的背景透明化

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

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

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

CSS3 透明度的使用方法
0.3
CSS3 透明度的使用方法
0.9
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 由淺至深)。

CSS3 透明度的使用方法
0.1
CSS3 透明度的使用方法
0.2
CSS3 透明度的使用方法
0.3
CSS3 透明度的使用方法
0.4
CSS3 透明度的使用方法
0.5
CSS3 透明度的使用方法
0.6
CSS3 透明度的使用方法
0.7
CSS3 透明度的使用方法
0.8
CSS3 透明度的使用方法
0.9
CSS3 透明度的使用方法
1.0

CSS CSS3 HTML5

相關文章

最新文章

更多文章

作者簡介

個人頭像照片
Jin
努力寫文中！
更多文章