2 sinat 35836870 sinat_35836870 于 2017.01.17 06:36 提问

背景图片background-position:center,之后,浏览器缩放,内容错位???

请问::
背景图片设置了background-position之后,其他的内容区在浏览器缩放的时候就移位了,如下图,
要怎么设置它们才能跟随背景图片一致??
内容用的绝对定位,写死不行,百分比也不对,要怎么写呢,求指点,谢谢

外部div
.wrapper-ydy{
width: 100%;
text-align: center;
background-image: url("../images/yd/yd-bg.png");
background-repeat: no-repeat;
background-position: center;
height: 679px;
position: relative;
z-index: -99999;
}

头部,进入主页内容
.ydy-top{
z-index: 1000;
background-color: #fffa62;
width: 200px;
position: absolute;
top: 8%;
left: 55%;
}图片

2个回答

u010434246
u010434246   2017.01.17 09:54

楼主可以试一试相对路径 div 的

showbo
showbo   Ds   Rxr 2017.01.17 20:20

你那个书卷背景图片应该单独出来设置为黄色那块的背景

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
CSS中Backgroud-position(背景图片)定位问题详解
background-position的说明:     设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。     默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。     如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定
CSS中背景图片的属性:background-repeat、background-position、background-size
背景图片的各种属性: 1、background-repeat:设置图片平铺方式。有三个属性:no-repeat(图片保留自身大小不平铺)、repeat-x(图片在水平方向上平铺)、repeat-y(图片在垂直方向上平铺) 2、background-position:确定图片显示的位置。 background-position: 30px 50px;   图片在水平方向上向右偏移30px,在垂
关于大背景图片随浏览器百分比缩放的问题
新手,此文为整理自己的疑惑。存在问题欢迎指正,多谢。 最近在写一个学校的引导页,背景图片1920*679。 以前写适应屏幕都是用100%写,所以这一次依然这样写了,但是这次却是一个有内容的背景图片,所以100%的方法导致logo等被压缩变形了。 后来又被要求,屏幕是100%的时候显示图片中间的内容部分,浏览器内容缩放后,整个背景显示出来,即两边隐藏的背景也显示出来,并且在屏幕
css控制背景图片位置-background-position
最近经常给div在加背景图片的时候,发现背景图片的位置总是跟自己想要的效果不一样,所以就粗略的研究了一下,把结果和过程跟大家一起分享一下。现在就用div来举例子,其他的容器也都一样。主要来介绍一下背景background的几个属性。 我们给一个div加上背景后,先仅仅控制背景图片的路径,其他的都不做控制。这时候背景图片的坐标是左上角,如果图片大小大于div的大小,多出来的部分会被切掉,如果图
css不兼容情况 background-position在firefox下不兼容,出现图片位置不对,的处理情况;ie6、ie7强制选择器。
一、只需要在样式中加入,html{height:100%;}就正常了。 二、一些情况下在有ie不兼容情况,可以用 *html  (样式名称){css代码},可以实现强制选择ie6执行的情况; 用*+html 样式名称{css代码},实现ie7 的强制选择; 三、其他的很多不兼容只有具体出现时,在解决了。 ie调试工具:firebug、IEcollection、IETest、Httpwatch
浏览器缩放后,flashcanvas内部绘图时坐标错位的解决方案
最近在使用flashcanvas来解决ie等不支持HTML5 canvas的问题,我做的是个画笔工具,当用户把浏览器缩放为75%时,画出的图形居然错位了,我把坐标的值*0.75传进去就ok了 以下是计算当前浏览器缩放比例的方法 detectZoom:function(){ var ratio=0, screen=window.screen, ua=navigato
浏览器缩放造成的网页错位问题
1.li标签的内容自动换行
CSS之Background-Position left right center top buttom属性
1. background-position:left top; 背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。 等同于 background-position:0,0; 也等同于background-position:0%,0%; 2. background-position:right bottom; 背景图片的右下角和容器(contain
设置背景图片不随浏览器放大而改变(背景固定,只上层div滚动)
onunload测试 body{ margin:0; padding:0;} #con{ position:fixed; top:0; left:0; height:100%; width:100%; background-image:url("t01a3c415ab2e1e4223.jpg"); background-position: center 0; backgrou
ie6的background-position属性值center,bottom 失效
如下结构:    我们的目的是让图片在垂直方向上居中。但是在ie6下却没有垂直居中,检测发现,div1的属性值虽然是100%,但是并没有像我们所期望的那样高度和其父元素的高度相同。解决办法是给div1元素加上overflow:hidden。