缩放浏览器时 背景图片固定

今天遇到一个很奇怪的问题,页面做好后,当缩放浏览器的时候,背景图片跟着移动,这就使本来做好的内容看起来像是错位了一样,跟背景对不上。

研究了一下发现,不需要fixed 之类的,只需要给body加个 min-960px 就解决了。

上代码:

html

1 <div class="baby-cartoon">
2 <!-- floor1 -->
3 <div class="floor floor1">
4     <div class="w960">
5         <p class="text">孩子进入小学,动画片便成了父母眼中最大的敌人。担心孩子沉迷动画片耽误学习,担心孩子被动画情节误导,担心动画片没有教育意义……于是粗暴地关掉孩子正在津津有味观看的动画片几乎是每个家庭每天都要上演的一幕。但是父母可能不知道的是,你关掉的不仅仅是动画片还有孩子的天性。究竟如何选择动画片?一起看看好网专家怎么说:</p>
6         <i>责任编辑:Yuki</i>
7         <div class="share"></div>
8     </div>
9 </div>

css

1 body{font-size: 12px;min- 960px}
2 .baby-cartoon .w960{960px;height:540px;_border:1px solid red;margin:0 auto;position: relative;}
3 .baby-cartoon .floor{100%;margin:0 auto;min-height: 300px;clear:both;}
4 
5 /*floor1*/
6 
7 .baby-cartoon .floor.floor1{height:540px;background: url('../images/katoon_01.jpg') center top no-repeat;color: #000;}
原文地址:https://www.cnblogs.com/webskill/p/4552309.html