【CSS】整屏大背景

 

1. 利用div的层次，设置底层div充满屏幕，并给div设置背景图

<div id="Layer1" style="position:absolute;top:0;width:100%; height:100%; z-index:-1">
　　<img src="resources/um/img/um_bg_1.jpg" height="100%" width="100%"/>
</div>

---

 

2. 利用body元素

body{background：url no-repeate center position red ; background-size:cover};

body{background：url no-repeate center position red ; background-size:contain};

background-size:cover    背景图片充满整个容器，不考虑是否看到完整图片

background-size:contain  背景图片充满整个容器，并出现完整图片

background-size:200px 100px;　　数值表示方式

background-size:30% 60%;　　百分比表示方式

background-size:auto;  　　以图片自身大小来填充元素，即auto值

---

 

3. js 获取屏幕宽高，设置img 宽高

---

 

4. 使用滤镜

body{ 
　　filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/skin/v2011/images/body.png',sizingMethod='scale');
　　background-repeat: no-repeat; 
　　background-positon: 100%, 100%; 
} 

---

 

5. 图片自动适应浏览器大小  - 待验证

img.source-image {
　　 width: 100%;
　　 position: absolute;
　　 top: 0;
　　 left: 0;
}

---

http://liyunpeng.iteye.com/blog/2101956

---