支持IE-Firefox-Chrome的css图层的透明背景文字不透明
日期：2014-05-18 浏览次数：20260 次
<!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" content="text/html; charset=utf-8" />
<title>爱易网特效频道 js.aiyiweb.com</title>
<link href="http://webfeike.net/logo01.png" rel="shortcut icon">
<style type="text/css">
.box { position: relative; zoom:1; text-align: center; }
#div-one {position: absolute;bottom: 50px;left: 10px;}
.bg_tran {
position: absolute;
top: 60px;
left: 50%;
margin-left: -75px;
width: 150px;
height: 220px;
background: #000;
border: solid 1px #fff;
opacity:0.75;-moz-opacity:0.75;-khtml-opacity:0.75;filter:alpha(Opacity=75);
z-index: 2;
}
.writing {
position: absolute;
top: 60px;
left: 50%;
margin-left: -75px;
width: 150px;
height: 120px;
color: #fff;
z-index: 3;
}
</style>
</head>
<body>css讓層的背景透明文字不透明(3個層定位)支持IE-Firefox-Chrome
<div id="div-one">
<div class="box">
<img src="http://www.aiyiweb.cn/upload/image/dvd/2013-1/2013110134950161.jpg" alt="說明文字" />
<div class="bg_tran"></div><!-- 背景補丁層 -->
<div class="writing">
<p>爱易网，网页制作教程</p>
<p>网页特效，js.aiyiweb.com</p>
<p>网页模板，www.aiyiweb.cn</p>
<p>源码下载，down.aiyiweb.com</p>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>爱易网特效频道 js.aiyiweb.com</title>
<link href="http://webfeike.net/logo01.png" rel="shortcut icon">
<style type="text/css">
.box { position: relative; zoom:1; text-align: center; }
#div-one {position: absolute;bottom: 50px;left: 10px;}
.bg_tran {
position: absolute;
top: 60px;
left: 50%;
margin-left: -75px;
width: 150px;
height: 220px;
background: #000;
border: solid 1px #fff;
opacity:0.75;-moz-opacity:0.75;-khtml-opacity:0.75;filter:alpha(Opacity=75);
z-index: 2;
}
.writing {
position: absolute;
top: 60px;
left: 50%;
margin-left: -75px;
width: 150px;
height: 120px;
color: #fff;
z-index: 3;
}
</style>
</head>
<body>css讓層的背景透明文字不透明(3個層定位)支持IE-Firefox-Chrome
<div id="div-one">
<div class="box">
<img src="http://www.aiyiweb.cn/upload/image/dvd/2013-1/2013110134950161.jpg" alt="說明文字" />
<div class="bg_tran"></div><!-- 背景補丁層 -->
<div class="writing">
<p>爱易网，网页制作教程</p>
<p>网页特效，js.aiyiweb.com</p>
<p>网页模板，www.aiyiweb.cn</p>
<p>源码下载，down.aiyiweb.com</p>
</div>
</div>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
