支持IE-Firefox-Chrome的css图层的透明背景文字不透明

稿源：互联网 2018-09-15 02:36:58 点击： 7789 撤稿纠错

css让层的背景透明，而且文字不透明显示(使用了3个层定位)，支持IE-Firefox-Chrome多浏览器

以下讨论的是和Firefox Chrome 透明背景相关的支持IE-Firefox-Chrome的css图层的透明背景文字不透明教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>

<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; 
}
p{font-size:12px;}
</style>

</head>
<body>css讓層的背景透明文字不透明(3個層定位)支持IE-Firefox-Chrome
<div id="div-one">
  <div class="box"> 
    <img src="http://js.alixixi.com/uploadpic/201809150235576909.jpg" alt="說明文字" />
 <div class="bg_tran"></div>
 <div class="writing"> 
   <p>阿里西西，网页制作教程</p>
   <p>网页特效，js.alixixi.com</p>
   <p>网页模板，moban.alixixi.com</p>
   <p>源码下载，down.alixixi.com</p>
 </div>
  </div>
  </div>
</body>
</html>

关于支持IE-Firefox-Chrome的css图层的透明背景文字不透明的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018091588715.shtml方便下次再访问哦。

·上一篇： 记录鼠标运行轨迹，拖动放开时，图层会自动寻找轨迹归位
·下一篇： Jquery制作的UL表格化+边框+鼠标滑过提示框特效

支持IE-Firefox-Chrome的css图层的透明背景文字不透明

文章分类LIST >>返回首页

最新游戏

最新新闻