如图
<html> <head> <style type="text/css" > #TopBackGround { width:200px; height:300px; margin:0 100px 0 0 ; background-image:url(background_img.png); position:relative; z-index:-1; } #backgroundbg2 { position:absolute; top:0; background: -webkit-gradient(linear,center top,center bottom,from(rgba(255, 255, 255, 0.1)),to(rgba(255, 163, 204, 0.5))); z-index:-1; } #mainContents { position:absolute;
word-wrap:break-word； width:60%; height:50%; background-color:red; margin:10% 20% 0 20%; z-index:1; } </style> <script type="text/javascript"> </script> </head> <body> <div id="TopBackGround"> <div id="backgroundbg2"></div> <div id="mainContents"> testtesttestetesttesttest </div> </div> <script type="text/javascript" > var interval = null, oldHeight = 0; interval = setInterval(update, 1000); function update() { var TopBackGround = document.getElementById("TopBackGround"), backgroundbg2 = document.getElementById("backgroundbg2"); if (oldHeight != TopBackGround.offsetHeight) { oldHeight = TopBackGround.offsetHeight backgroundbg2.style.height = oldHeight + "px"; backgroundbg2.style.width = TopBackGround.offsetWidth + "px"; } } </script> </body> </html>