Div透明代码，透明的box背景

>首页 -> 社会专题 -> 代码效果 2011-02-20 来源: 作者: 【大中小】浏览:1114次评论:0条

透明的box背景，可以控制宽和高。实现上是让一个处于背景上层的Div透明，运用CSS和JS技术共同实现，JS部分还增加了对Div层的动态控制，点击控制按钮可分别改变透明层的宽度和高度，当初写这个例子只是研究CSS的相关属性，现在与大家分享留个记号。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/transitional.dtd"> <html> <head> <title>透明Div的实现</title> <style type="text/css"> body { background: url(daima/css3yuanzhu/images/1.jpg); background-repeat: no-repeat; } div.box { border: 1px solid #000000; position: relative; width: 100%; } div.box_contents { background-color:transparent; height: 100%; position: relative; width: 100%; z-index: 101; } div.box_background { background-color: white; height: 100%; filter:alpha(opacity=75); /* IE's opacity*/ left: 0px; opacity: 0.75; position: absolute; top: 0px; width: 100%; z-index: 99; } </style> <script type="text/javascript"> function change_w(id, pixels) { var x = document.getElementById(id); x.style.width = x.offsetWidth + pixels + "px"; } function change_h(id, pixels) { var x = document.getElementById(id); x.style.height = x.offsetHeight + pixels + "px"; } function getElementsByName_iefix(tag, name) { var elem = document.getElementsByTagName(tag); var arr = new Array(); for(i = 0, iarr = 0; i < elem.length; i++) { att = elem[i].getAttribute("name"); if(att == name) { arr[iarr] = elem[i]; iarr++; } } return arr; } function transparentbg(tbg_id) { var bak = getElementsByName_iefix("div", tbg_id); for(i = 0; i < bak.length; i++) { bak[i].style.height = bak[i].parentNode.clientHeight + "px"; bak[i].style.width = bak[i].parentNode.clientWidth + "px"; } } </script> </head> <body onload="transparentbg('bg_name')" onclick="transparentbg('bg_name')"> <div style="width: 470px;"> <div class="box" id="box"> <div class="box_background" name="bg_name"> </div> <div class="box_contents"> 宽度控制: <input type="button" value="+" onclick="change_w('box', 30);" /> / <input type="button" value="-" onClick="change_w('box', -30);" /><br /> 高度控制: <input type="button" value="+" onclick="change_h('box', 30);" /> / <input type="button" value="-" onClick="change_h('box', -30);" /><br /> <div style="padding: 2px; font-weight: bolder; font-size: 14px;"> <br />这里是Box盒子的内容! :O <br /> <br /> </div> </div> </div> </div> </body> </html> 提示：您也可以先修改部分代码再运行！

您看到此篇文章时的感受是：

Tags：

责任编辑：佚名

【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

酒精度

顶一下

上一篇：网页Div层拖动，拖拽特效代码

下一篇：一个高宽自适用100%,部分高度固定..

手机扫描

空间赞助

快速互动

有事联系

统计联系

版权与建议