码迷,mamicode.com
首页 > 其他好文 > 详细

仿百度首页背景图片始终全屏

时间:2015-03-09 16:23:00      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

利用position:fixed属性新建一个全屏的层,将背景图片置于这个层中,这样就不会随着鼠标滚轮的滚动而改变背景图片的大小。

主要css:

.image_bg{position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1}
.image_bg img{position:absolute;left:0;top:0;margin:0 auto;
width:100%;height:100%;z-index:-1}
测试代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
	*{margin:0;padding:0;font-family:微软雅黑}
	body{height:100%;width:100%;background:#EFEFEF}
	.image_bg{position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1}
	.image_bg img{position:absolute;left:0;top:0;margin:0 auto;
	width:100%;height:100%;z-index:-1}
	.search{height:40px;width:600px;margin:40px auto}
	#search_content{width:500px;float:left;line-height:40px;font-size:10pt;
	border:1px solid #AFAFAF;color:#AFAFAF;padding-left:5px}
	.search button{height:40px;width:80px;line-height:30px;font-size:10pt;float:right;
	border:1px solid #AFAFAF;cursor:pointer}
</style>
</head>

<body>
	<div class="image_bg"><img src="../208.jpg"/></div>
	<div class="search">
		<input type="text" id="search_content"></input>
		<button>搜索</button>
	</div>
</body>
<script type="text/javascript">
</script>
</html>
效果展示:

技术分享



仿百度首页背景图片始终全屏

标签:

原文地址:http://blog.csdn.net/xuzengqiang2/article/details/44154481

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!