css背景全屏-视差

浏览数：78 / 时间：2015年06月09日

技术分享

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        *{margin:0px; padding:0px;}
        a{height:500px; display:block;}
        .box{
			position:relative;
			height:600px; /* 此为元素背景图像实际高度 X 元素背景图像个数 */
			width:1000px;
			margin:0 auto;
			background-repeat:no-repeat;
			background-position:center center;
			background-attachment:fixed; /* 使背景图像相对于窗体固定 */
			background-size:cover; /* 取值auto | cover | contain */
			/* 背景图像的真实大小 */
			/* 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器 */
			/* 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内 */
			overflow:hidden;
			text-align:center;
		}
		.box-1{background-image:url(images/p1.jpg);}
		.box-2{background-image:url(images/p2.jpg);}
		.box-3{background-image:url(images/p3.jpg);}
		.box-4{background-image:url(images/p1.jpg);}
		.box-5{background-image:url(images/p2.jpg);}
		.box-6{background-image:url(images/p3.jpg);}
    </style>
</head>
<body>
<a class="box box-1" id="a1">a1</a>
<a class="box box-2" id="a2">a2</a>
<a class="box box-3" id="a3">a3</a>
<a class="box box-4" id="a4">a4</a>
<a class="box box-5" id="a5">a5</a>
<a class="box box-6" id="a6">a6</a>
</body>
</html>

点击下载附件

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css背景全屏-视差