缩放浏览器时 背景图片固定
生活随笔
收集整理的這篇文章主要介紹了
缩放浏览器时 背景图片固定
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
今天遇到一個(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)題。
- 上一篇: 招行e分期和普通分期有什么区别?选择最合
- 下一篇: 前端工程师必须要知道的SEO技巧(2):