仿微博半透明边框 

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<style type="text/css">
		body {
			background:blue;
		}
		#box {
			width:300px;
			padding:5px;
	
			position:relative;
		}
		#alpha_bg {
			background:#f2f2f2;
			width:100%;
			height:100%;
			opacity:0.3;
			
			position:absolute;
			top:0;
			left:0;
			
			-webkit-border-radius:4px;
			-moz-border-radius:4px;
			border-radius:4px;
		}
		#content {
			border:1px solid #bbb;
			background:#fff;
			padding:10px;
		}
	</style>
</head>
<body>
	<div id="box">
		<div id="alpha_bg"></div>
		<div id="content">内容区</div>
	</div>
</body>
</html>

我的思路是这样的，#box先相对定位，以便#alpha_bg可以绝对定位，但你会发现 ，这样做有个问题，好像整个box都无法选择文本了。

原因就是#alpha_bg位于#content之上，至于为什么跑到它上面去了，我也不甚清楚，希望高人指点一二。

解决办法很简单，既然是层级问题，自然用到z-index，但这个属性有个前提，目标元素必须设置了position: relative/absolute/fixed三者之一，即不能是默认值就行。

最终版

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<style type="text/css">
		body {
			background:blue;
		}
		#box {
			width:300px;
			padding:5px;
	
			position:relative;
		}
		#alpha_bg {
			background:#f2f2f2;
			width:100%;
			height:100%;
			opacity:0.3;
			
			position:absolute;
			top:0;
			left:0;
			z-index:0;
			
			-webkit-border-radius:4px;
			-moz-border-radius:4px;
			border-radius:4px;
		}
		#content {
			border:1px solid #bbb;
			background:#fff;
			padding:10px;
			
			position:relative;
			z-index:2;
		}
	</style>
</head>
<body>
	<div id="box">
		<div id="alpha_bg"></div>
		<div id="content">内容区</div>
	</div>
</body>
</html>

这只是一种方式，还有一种是div外套一层div，外层div设置半透明圆角背景，再给个padding就哦了

posted @ 2011-09-25 11:25  越己  阅读(1519)  评论(1)    收藏  举报