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订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些