1

我正在使用 CSS 处理可扩展的背景图像。我正在使用带有嵌套 AP div 的 div 标记容器，其中包含我想与背景图像一起缩小的动画 Flash 徽标。

我有两个问题一直在研究，但我似乎无法解决：

  1. 当我缩小浏览器以测试图像时，AP div 会移动位置并且不会停留在它应该在的确切位置。根据浏览器，它会向上或向下移动一点。

  2. 我无法让它在 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>
4

1 回答 1

0

如果几乎不完全重写代码，就很难修复代码，因为我相信它是 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，但我有点担心改变身体的显示类型
于 2013-05-18T19:37:30.267 回答