首页 > 代码库 > 【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】整屏大背景