今天遇到一個(gè)很奇怪的問(wèn)題，頁(yè)面做好后，當(dāng)縮放瀏覽器的時(shí)候，背景圖片跟著移動(dòng)，這就使本來(lái)做好的內(nèi)容看起來(lái)像是錯(cuò)位了一樣，跟背景對(duì)不上。

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

上代碼：

html

1 <div class="baby-cartoon"> 2 <!-- floor1 --> 3 <div class="floor floor1"> 4 <div class="w960"> 5 <p class="text">孩子進(jìn)入小學(xué)，動(dòng)畫(huà)片便成了父母眼中最大的敵人。擔(dān)心孩子沉迷動(dòng)畫(huà)片耽誤學(xué)習(xí)，擔(dān)心孩子被動(dòng)畫(huà)情節(jié)誤導(dǎo)，擔(dān)心動(dòng)畫(huà)片沒(méi)有教育意義……于是粗暴地關(guān)掉孩子正在津津有味觀看的動(dòng)畫(huà)片幾乎是每個(gè)家庭每天都要上演的一幕。但是父母可能不知道的是，你關(guān)掉的不僅僅是動(dòng)畫(huà)片還有孩子的天性。究竟如何選擇動(dòng)畫(huà)片？一起看看好網(wǎng)專(zhuān)家怎么說(shuō)：</p> 6 <i>責(zé)任編輯: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;}

?

轉(zhuǎn)載于:https://www.cnblogs.com/webskill/p/4552309.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。