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

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

研究了一下发现,不需要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">孩子进入小学,动画片便成了父母眼中最大的敌人。担心孩子沉迷动画片耽误学习,担心孩子被动画情节误导,担心动画片没有教育意义……于是粗暴地关掉孩子正在津津有味观看的动画片几乎是每个家庭每天都要上演的一幕。但是父母可能不知道的是,你关掉的不仅仅是动画片还有孩子的天性。究竟如何选择动画片?一起看看好网专家怎么说:</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;}
时间: 2024-11-18 18:26:18

缩放浏览器时 背景图片固定的相关文章

安卓浏览器看背景图片,有些设备会模糊。

用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960*640分辨率,在网页里只显示了480*320,这样devicePixelRatio=2.现在android比较乱,有1.5的,有2的也有3的. 想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍).例如一个div的宽高是100*100,背景图

解决IE8浏览器下背景图片无法拉伸(铺满)的问题

IE8浏览器不兼容这种写法: 1 body{ 2 background-image:url(1.jpg); 3 background-size:cover; 4 background-repeat:no-repeat; 5 } 6 7 <body> 8 </body> 网上找了很多方法,包括使用滤镜什么的都不管用,后来发现其实很简单. 解决方法:使用<img>标签即可,如下: 1 img { 2 position: fixed; 3 width: 100%; 4 hei

CSS背景颜色、背景图片、平铺、定位、固定

CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:url(图片地址);如设置背景图片 路径不在说明了! CSS背景图片平铺设置(如果不设置图片默认设置为x轴y轴同时平铺即值为repeat) background-repeat:repeat-x;如设置x轴平铺: background-repeat:no-repeat如设置不平铺: CSS背景图片定位设

用JS去设置HTML页面鼠标悬浮时改变背景图片

首先将每一个li上面添加一个移入事件onmouseover;在悬浮事件里面设置event事件源 JS样式里首先应该找到页面里的ul 然后在ul里面的所有li var ln = bg.querySelectorAll("li"); 在移入函数中获取触发事件元素    var leg = e.target;//获得触发事件元素   target 事件属性可返回事件的目标节点(触发该事件的节点), 在循环里面初始化背景图片 设置鼠标悬浮时背景图片 event事件源触发了鼠标悬浮事件 如果在初

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

css代码添加背景图片常用代码

css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; height: 0px; margin: 20px 0px;"> 2 背景图片 {background-image: url(url)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {

CSS3 background-image背景图片相关介绍

这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: background-image :设置元素的背景图片. background-repeat :设置如何平铺背景图片. background-attachment :设置背景图片是否固定或随着滚动移动. background-position :设置背景图片的位置. background-size

网页的背景图片代码

网页背景图片代码 1.(最普遍类) <style>body{background-image:url(logo.gif);background-repeat:no-repeat;background-position:center}</style> 说明:以上代码为网页背景图片固定代码!网页背景图片固定代码,这样,当向下拉网页时,网页背景图片不会跟着向上移动,达到不动的目的! 2.(综合类) 3.<P class=style6> </P></SPAN&

网页背景图片代码

1.(最普遍类) <style>body{background-image:url(logo.gif);background-repeat:no-repeat;background-position:center}</style> 说明:以上代码为网页背景图片固定代码!网页背景图片固定代码,这样,当向下拉网页时,网页背景图片不会跟着向上移动,达到不动的目的! 2.(综合类) 3.<P class="style6"> </P></SP