CSS層透明_層和布局特效

這個代碼段是演示用CSS控制一個DIV層的透明效果，大家可以看到平鋪的背景已經顯現出來，實際上比較簡單就可以實現，就是用CSS控制一個DIV層，定義樣式表時加入filter:alpha(opacity=65);這句代碼，里面的值是用來控制透明度的，你可以試著改變它的值，會有不同的透明效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>CSS定義層的透明效果</title>
<style type="text/css">
	body { 
		font-family: Arial, Helvetica, sans-serif; 
		line-height: 1.5;
		background: url(/jscss/demoimg/bgdemo1.jpg);
		color: #fff;
		width: 770px;
		margin: 0 auto;
		padding: 50px;
	}
	h1,h2 { 
		color: #77AFC7 !important;
		margin-bottom: 0;
		line-height: 1.2em;
	}
	p {
		margin-top: 0;
	}
	a {
		color: #aaa;
	}
	a:hover {
		color: #FFF !important;
		text-decoration: none;
	}
	code { 
		background-color: #100;
		padding: 0.2em 0.5em;
		display: inline-block;
	}
	#wrapper { 
		overflow: hidden;
	}
	.overlay {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #000;
		opacity: 0.65;
		-moz-opacity: 0.65;
		filter:alpha(opacity=65);
	}
	.container {
		position: relative;
		float: left;
	}
	.mrc {
		position: relative; /* Fixes the z-index */
		float: left;
	}
	#column-1 {
		width: 500px;
	}
	#column-2 {
		width: 250px;
		margin-left: 20px;
		float: left;
		display: inline;
	}
	#column-1 .mrc {
		padding: 20px;
		width: 460px;
	}
	#column-2 .mrc {
		padding: 10px;
		width: 230px;
	}
	
	/* Let's compensate for IE6's inability to interpret top: 0; and bottom: 0; */
	* html #column-1 .overlay { height: expression(document.getElementById("column-1").offsetHeight); }
	* html #column-2 .overlay { height: expression(document.getElementById("column-2").offsetHeight); }
	
</style>
</head>

<body>
	<div id="wrapper">
		<div id="column-1" class="container">
			<div class="overlay"></div>
			<div class="mrc">
				<h2>透明的網頁.</h2>
				<p>IE6,FF測試通過</p>
				<p>這是一個透明的網頁，還不錯吧？實際上是用CSS控制DIV層的半透明狀態，這樣會使平鋪的背景顯現出來，看上去酷了不少。</p>
				<p>By  <a href="/">CC-Public Domain</a></p>

</div>
		</div>
		<div id="column-2" class="container">
			<div class="overlay"></div>
			<div class="mrc">
				<h2>A sidebar</h2>
				<p>這是右側，你可以嘗試修改一下。</p>
			</div>
		</div>
	</div>
</body>
</html>

所屬頻道：層和布局特效/更新時間：2012-12-18

[收藏][報錯][返回列表]

相關層和布局特效：

CSS層透明_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些