CSS 透明度的使用方法

分類:網站架設

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

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

圖片透明化

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

.元素 { 
opacity:9; 
}
opacity:0.1
opacity:0.2
opacity:0.3
opacity:0.4
opacity:0.5
opacity:0.6
opacity:0.7
opacity:0.8
opacity:0.9
opacity:1.0

背景透明化

將底色的背景透明化

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

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

範例使用 CSS3 語法為圖片加上圖說,請先觀看此篇:figure、figcaption
0.3
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 由淺至深)。

0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
1.0
TAGS: #CSS #CSS3 #HTML5