首页 > 代码库 > 【CSS】整屏大背景

【CSS】整屏大背景

 

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

<div id="Layer1" style="position:absolute;top:0;width:100%; height:100%; z-index:-1">
  <img src="http://www.mamicode.com/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=http://www.mamicode.com/‘/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


 

【CSS】整屏大背景