今天遇到一個很奇怪的問題，頁面做好后，當縮放瀏覽器的時候，背景圖片跟著移動，這就使本來做好的內容看起來像是錯位了一樣，跟背景對不上。

研究了一下發(fā)現，不需要fixed 之類的，只需要給body加個 min-width:960px 就解決了。

上代碼：

html

1 <div class="baby-cartoon"> 2 <!-- floor1 --> 3 <div class="floor floor1"> 4 <div class="w960"> 5 <p class="text">孩子進入小學，動畫片便成了父母眼中最大的敵人。擔心孩子沉迷動畫片耽誤學習，擔心孩子被動畫情節(jié)誤導，擔心動畫片沒有教育意義……于是粗暴地關掉孩子正在津津有味觀看的動畫片幾乎是每個家庭每天都要上演的一幕。但是父母可能不知道的是，你關掉的不僅僅是動畫片還有孩子的天性。究竟如何選擇動畫片？一起看看好網專家怎么說：</p> 6 <i>責任編輯:Yuki</i> 7 <div class="share"></div> 8 </div> 9 </div>

css

1 body{font-size: 12px;min-width: 960px} 2 .baby-cartoon .w960{width:960px;height:540px;_border:1px solid red;margin:0 auto;position: relative;} 3 .baby-cartoon .floor{width: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

總結

以上是生活随笔為你收集整理的缩放浏览器时 背景图片固定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。