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

喜歡這篇文章的話
請按個讚或者分享支持一下!

喜歡這篇文章的話
請按個讚或者分享支持一下!

最新的教學及情報資訊都在INMAG!

作者簡介

Jin
寫好每一篇文章讓各位都能學習到各種小知識,希望大家會喜歡!