Home » CSS3 研究室

[CSS3]opacity 透明效果

[ 日期： | 瀏覽：20,761 | 迴響：10 ]
範例 1
範例 2

雖然說 CSS3 還沒正式公佈，但 opacity 屬性已經是各瀏覽器支援最完整屬性了(當然還是除了 IE 系列之外)。

檢視原始碼 CSS
1

opacity: <alphavalue> | inherit

其中 alphavalue 值介於 0 至 1 之間；0 為完全透明，1 則完全不透明。來看實例吧：

檢視原始碼 HTML
1
2
3
4
5
6
7

<body>
	<div class="opacity1"></div>
	<div class="opacity2"></div>
	<div class="opacity3"></div>
	<div class="opacity4"></div>
	<div class="opacity5"></div>
</body>

接著就能直接利用 CSS 來設定透明度：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

div {
	width: 500px;
	height: 20px;
	background: #000;
}
.opacity1 {
	opacity: 1.0;
}
.opacity2 {
	opacity: 0.8;
}
.opacity3 {
	opacity: 0.6;
}
.opacity4 {
	opacity: 0.4;
}
.opacity5 {
	opacity: 0.2;
}

我們可以利用透明度的改變來做出突顯的效果：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<style type="text/css">
	p img {
		opacity: 0.4;
	}
</style>
<script type="text/javascript">
	$(function(){
		$('img').hover(function(){
			$(this).stop().animate({
				opacity: 1
			});
		}, function(){
			$(this).stop().animate({
				opacity: .4
			});
		});
	});
</script>
 
<body>
	<p>
		<img src="images/nami.jpg" />
	</p>
</body>

但 opacity 能做到的就只是變淡變透的效果而已，如果真的是要變黑白的話，可以參考：用 jQuery 幫圖片加上黑白效果

範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

10 筆針對 [CSS3]opacity 透明效果 的迴響

  1. 不好意思
    我想請問一下
    你的網站範例的動畫檔案
    都是等到頁面捲動到該處才開始撥放
    請問
    那是怎麼做到的啊？

  4. 我想再問一下

    就是我可以用jQ做出

    當頁面捲動到特定位置(像是文章哪一段，或是出現了何種圖片等)

    便觸發動作 (像是圖片更換等動作)

    可以這樣做嗎？

  5. 不好意思 我想問一下 在Div裡面有放img 但我只是想要讓div做半透明效果
    該怎麼處理?? 直接設定opacity 結果會連圖片都一起半透明了 Orz

    • 為了相容舊版瀏覽器, 通常我會在 div 中再多放一個 div 當背景用, 這個 div 才會加上透明度, 然後設定成 position: absolute; 讓它跟圖片疊一起。

發表迴響