现在的位置: 首页 > 综合 > 正文

设置全屏的背景图片

2017年11月28日 ⁄ 综合 ⁄ 共 678字 ⁄ 字号 评论关闭

关键词:Full size stretched background image,CSS 2和CSS 3的实现

我们有时期望背景图片自动拉伸占据所有空间,使用CSS 3做起来并不麻烦,定义如下的CSS:

body {
	background:#3d71b8 url(../back_main.png);
	background-size: 100%;
	background-position:center;
}

但是background-siz是CSS 3的属性,并不是所有的浏览器都支持。使用CSS 2的一种实现如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Welcome to my blog</title>
	<style type="text/css">
	#bg {
		position:fixed; 
		top:0; 
		left:0; 
		width:100%; 
		height:100%;
	}

	#bg img {
		position:absolute; 
		left:0; 
		right:0; 
		bottom:0; 
		margin:auto; 
		width:100%;
		height:100%;
		z-index:-1;
	}
	</style>
</head>
<body>
	<div id="bg">
		<img src="back_main.png" alt="">
	</div>
	<div>
	Your content goes here!
	</div>
</body>
</html>

抱歉!评论已关闭.