一、现背景图片的自适应分辨率:
<body> <div id="web_bg" style="position:absolute; width:99%; height:99%; z-index:-1"> <img style="position:fixed;" src="<%=path%>/file/img/welcome_bkg.jpg" height="98%" width="99%" /> </div> </body>
二、3种方法使背景图随电脑分辨率改变,兼容新老办法
1、尝试以下css代码,对每个分辨率设置不同的背景图片:
/* 大屏幕 */ @media (min-width: 1200px) { ... } /* 平板电脑和小屏电脑之间的分辨率 */ @media (min-width: 768px) and (max-width: 979px) { ... } /* 横向放置的手机和竖向放置的平板之间的分辨率 */ @media (max-width: 767px) { ... } /* 横向放置的手机及分辨率更小的设备 */ @media (max-width: 480px) { ... }
2、利用css3新属性:background-size
具体使用方法可以百度:css3 background-size
3、利用绝对定位方法,例如背景图是body层的,可以在body里建立一个div,div中插入img标签,也就是你的背景,长宽是100%,div的长宽也是100%(body、html标签要在css中设置长宽100%,常被忽略,虽然看似没有,但是有效的),代码例如:
<style type="text/css"> html, body { width:100%; height:100%; margin:0; padding:0;} .divBg { position:absolute; left:0; top:0; height:100%; width:100%;} .divBody{ position:absolute; left:0; top:0; height:100%; width:100%; text-align:center;} </style> <div class="divBg"><img src="/uploads/allimg/130827/1035506194-0.gif" height="100%" width="100%" /></div> <div class="divBody"> <div class="yourcss"> <h1>文字内容在这里,不受影响</h1> <h1>文字内容在这里,不受影响</h1> <h1>文字内容在这里,不受影响</h1> <h1>文字内容在这里,不受影响</h1> <h1>文字内容在这里,不受影响</h1> </div> </div>
类似的,如果想要做固定区域的背景图,一样可以相对于父级元素长宽设定。
如图: