Question

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

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

我想保持这种方式，以便浏览器始终显示完整的图像。目前我正在尝试使用这个HTML代码：

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

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

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

Answer 1

要明确。
你想制作一个静态的，居中的背景图像？

<小时/> 如果是这种情况，可以在CSS中完成。

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

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

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

Answer 2

<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;}

Answer 3

保留原始宽高比：

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

以固定div为中心，与图像大小相同

3 个答案: