清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/transitional.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <style type="text/css"> body { background: url(./water_lilies.jpg); background-repeat: no-repeat; } /*This is where the magic happens!*/ div.box { /*Any properties you'd want the box to have.*/ /*Would probably be position, dimension type stuff.*/ /*Though personally I would have a div outside this to control the dimensions.*/ 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"; } /*This function is meant to be used when you are needing faux getElementsByName() in IE. IE seems so use the 'id' attribute instead of 'name' when you use getElementsByName(). tag = This tag name that the 'name' attribute you want to get is attached to. Like if you called getElementsByTagName(). name = The value of the 'name' attribute you want. */ 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; } /*This function resets the height and width of the background to that of it's parent element's height and width. tbg_id = This is the value of the name attribute you named all your backgrounds. */ 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: 500px;"> <div class="box" id="box"> <div class="box_background" name="bg_name"> </div> <div class="box_contents"> Width: <input type="button" value="+" onclick="change_w('box', 30);" /> / <input type="button" value="-" onClick="change_w('box', -30);" /><br /> Height: <input type="button" value="+" onclick="change_h('box', 30);" /> / <input type="button" value="-" onClick="change_h('box', -30);" /><br /> <!-- This is a fix that is mainly for IE. Otherwise you'll get white space where you don't want it.--> <div style="padding: 2px; font-weight: bolder; font-size: 14px;"> This is the box contents! :O <br /> You see, the background will cover the whole div block no matter how wide or tall! <br /> <br /> <br /> Look at me! More content! </div> </div> </div> </div> </body> </html>