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

最新推荐文章于 2021-06-04 19:37:56 发布

许增强

最新推荐文章于 2021-06-04 19:37:56 发布

阅读量1.3k

点赞数

分类专栏： HTML & CSS

本文链接：https://blog.csdn.net/xuzengqiang2/article/details/44154481

版权

HTML & CSS 专栏收录该内容

35 篇文章 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>

效果展示：