CSDN学院讲师招募，诚邀您加入！博客Markdown编辑器上线啦那些年我们追过的Wrox精品红皮计算机图书PMBOK第五版精讲视频教程火星人敏捷开发1001问
仿百度首页背景图片始终全屏
分类：HTML & CSS
利用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" ""><html xmlns=""><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>效果展示：
上一篇jquery单页锚点移动
顶0踩0
主题推荐猜你在找
查看评论
* 以上用户言论只代表其个人观点，，不代表CSDN网站的观点或立场
核心技术类目
我不敢说我可以忘却，或者勇敢，坚强，等等等等一切堂皇而陈旧的字眼。
