0

所以我想将一个固定的 div 放在屏幕的中心。这个 div 也应该是子 div 的容器。我也希望它显示图像（作为背景）。这是图像的代码：

.centerdiv > img{
height: 100%;
width: auto;
}

我想保持这种状态，以便浏览器始终显示完整图像。目前我正在尝试使用此 html 代码：

<div class="centerdiv "><img src="bgstatic.png">
        </div>

我确实尝试过用 css 来做（在 css 代码中添加图像）。我真的不介意这部分。基本思想是有一个居中的图像和具有固定位置的菜单（因此它们不会滚动），并且页面的其余部分应该在它的顶部并且应该能够滚动。

我尝试过使用边距：自动、左/右 0/50% 等...我确实得到了我几乎想要的结果。但问题是我的容器 div 比固定的背景 div 更大，因此我很难用它来定位页面的其余部分......

4

3 回答 3

1

只是要清楚。
您正在寻找一个静态的、居中的背景图像？

如果是这样的话，它可以在你的 CSS 中完成。

body {
    background-image: url('bgstatic.png');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

这将静态地居中背景图像。

这是一个 jsFiddle 示例：http: //jsfiddle.net/TGpWe/

于 2013-07-05T18:56:47.110 回答
0 
<div style="text-align:center;">
   <div class="centerdiv "><img src="bgstatic.png"></div>
</div>

CSS

 .centerdiv{
               height: 100%;
               width: auto;
               display:inline-block;
               position:fixed;}
于 2013-07-05T18:56:50.347 回答
0

要保留原始纵横比：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

示例：http ://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

于 2013-07-05T19:35:45.403 回答