您的位置:阿里西西 > js网页特效代码 > 表格图层 > 支持IE-Firefox-Chrome的css图层的透明背景文字不透明

支持IE-Firefox-Chrome的css图层的透明...

  本站整理   佚名   2013-05-10   点击:   我要评论
更多
css让层的背景透明,而且文字不透明显示(使用了3个层定位),支持IE-Firefox-Chrome多浏览器
<!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.alixixi.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.alixixi.cn/upload/image/dvd/2013-1/2013110134950161.jpg" alt="說明文字" />
 <div class="bg_tran"></div><!-- 背景補丁層 -->
 <div class="writing"> 
   <p>阿里西西,网页制作教程</p>
   <p>网页特效,js.alixixi.com</p>
   <p>网页模板,www.alixixi.cn</p>
   <p>源码下载,down.alixixi.com</p>
 </div>
  </div>
  </div>
</body>
</html>



更多关于 Firefox Chrome 透明背景 的文章
相关阅读
会员评论所有会员评论

  

相关排行总榜

广告代码

菜单特效

日期特效