background 全屏解决方法

来源：互联网发布：项目数据分析公司排名编辑：程序博客网时间：2024/06/07 07:06

<body><!-- 背景层 --><div class="bg"></div></body>html, body {    width: 100%;    height: 100%;}body {    overflow: hidden;    position: relative;}.bg {    position: absolute;    left: 0;    top: 0;    z-index: 0;    width: 100%;    height: 100%;    background: url('page_1.jpg') no-repeat center center fixed;}

1.背景图片设置全屏CSS方法（推荐使用）

html{    background: url('images/page1.jpg') no-repeat center center fixed;    -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;}

2.背景图片设置全屏图片层方法
注意：此方法图片会拉伸失真

<body>    <img  src="images/page1.jpg" width='100%' height='100%' class="bgimg"></body>.bgimg{    position: fixed;    left:0px;    top:0px;    margin:auto;       width:100%;      height:100%;      z-index:-1;}

3.给背景图片设置一层透明的蒙住的版

<body>    <div class="cover"></div></body>.cover{    position: fixed;    left:0px;    top:0px;    z-index: -1;    opacity: 0.6;    height: 100%;    width: 100%;    background: black;}

1 0