CSS 透明度的使用方法

作者: Jin 網站架設

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

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

圖片透明化

設定元素,調整透明度屬性 opacity 數值,例如:0.1~1.0(淺到深)。

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

背景透明化

將底色的背景透明化

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

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

範例使用 CSS3 語法為圖片加上圖說,請先觀看此篇:figure、figcaption
CSS 透明度的使用方法
0.3
CSS 透明度的使用方法
0.9
CSS
.img-opacity2 {
width:100%;
}
.img-opacity2 figure {
position: relative;
margin: 0px auto;
}
.img-opacity2 figure img {
width: 100%;
margin:0px auto;
border:none;
}
.img-opacity2 figure figcaption {
margin:0px auto;
padding: 0px;
text-align:center;
position:absolute;
bottom: 9px;
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 由淺至深)。

CSS 透明度的使用方法
0.1
CSS 透明度的使用方法
0.2
CSS 透明度的使用方法
0.3
CSS 透明度的使用方法
0.4
CSS 透明度的使用方法
0.5
CSS 透明度的使用方法
0.6
CSS 透明度的使用方法
0.7
CSS 透明度的使用方法
0.8
CSS 透明度的使用方法
0.9
CSS 透明度的使用方法
1.0
相關文章
作者簡介
個人頭像照片
Jin
Jin 專注於撰寫實用教學、最新資訊與多元情報內容。