Question

我正在使用CSS处理可缩放的背景图像。我正在使用带有嵌套AP div的div标签容器，其中包含一个动画flash徽标，我希望将其与背景图像一起缩小。

我有两个问题，我一整天都在研究，似乎无法修复：

当我缩小浏览器以测试图像时，AP div会移动位置并且不会停留在应该位于的确切位置。它会向上或向下移动，具体取决于浏览器。
我无法在Internet Explorer中使用它。

我已阅读了很多Q / A并访问了很多论坛，并且在我的机智结束时。任何帮助将不胜感激。感谢!!!!!

网站测试可以在www.casadeoracionvida.org查看。我想要的行为是，徽标总是在白点（云）上，无论是否缩放，在任何浏览器中。

这是我的全部代码：

<head>




.imgwrapper {
height: 100%;
width: 100%;

}

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(img/bluesky.jpg);
background-repeat: no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

#logo {
position: absolute;
width: 23%;
height: 47%;
z-index: 1;
left: 40%;
top: 40%;

}

</head> 

<body>

<div class="imgwrapper"> <div id="logo"> 
<object id="FlashID" width="100%" height="100%">
<param name="movie" value="logo1.swf" /> </div> </div>

</body>
</html>

Answer 1

很难修改你的代码而几乎没有完全重写它，因为我认为它是Dreamweaver生成的。

这是我的看法：

<style>
body
{
    margin:0px;
    background: url(img/bluesky.jpg) no-repeat center top;
    background-size:100%;
    background-size:cover;
}
#globalWrap
{
    display: table;
    width:100%;
    height:100%;
}
#logoWrap
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#logo
{
    width:23%;
    display:inline-block;
}
</style>

<body>
<div id="globalWrap">
<div id="logoWrap">
<div id="logo">
<object id="FlashID" width="100%" height="100%">
<param name="movie" value="logo1.swf" />
</object>
</div>
</div>
</div>
</body>

注意：

这有点像黑客，但它被认为是水平和垂直对中元素最可靠的方法之一
我添加了background-size:100%; - 这样可以在cover无法使用的旧浏览器中延伸背景
我将display:table放在身体上以避免添加两个包装div，但我对改变主体的显示类型有点警惕

得到缩放div以保持相同的位置

1 个答案: