Question

我的背景图像中心位于身体上，如下所示：

body {
    position:relative;
    width: 100%;
    height: 100%;
    background: url(../img/backgroundMd.jpg) no-repeat center center fixed #000; 
}

我想将div对齐图像的一部分。所以它完全涵盖了它（在不同的屏幕分辨率上）

div {
    position:absolute;
    width: 400px;
    height: 320px;
    background-color: black;
    top: ?
    left: ?
}

backgroundMD.jpg非常大，所以它会离开屏幕。这就是为什么我不能做一个包装div和中心。有什么想法吗？

Answer 1

如果divs维度是固定的，你可以做这样的事情

div {
    position:absolute;
    width: 400px;
    height: 320px;
    background-color: black;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -165px;
}

Answer 2

因为如果将图像缩放到视口，您无法知道背景中图像的高度。您必须将背景添加为<img>元素。像这样：

http://jsfiddle.net/NicoO/dLBdv/

<div class="container">
    <div class="container-canvas">
        <p>Nice to sea you</p>
    </div>
    <img src="http://www.placehold.it/1000x500" /> 
</div>


.container
{
    position: relative;
}
.container > img
{
    max-width: 100%;
}

.container > .container-canvas
{
   background-color:blue;
   background-repeat: no-repeat;
   position: absolute;
   /* % to outer border */
   left:10%;
   top: 10%;
   bottom: 10%;
   right: 10%;
}

Answer 3

尝试使用此维度 - 这将帮助您将元素保留在页面中间

div {margin:0 auto;
     width:400px;
     height: 320px;
     background-color: black;}

将HTML元素与背景图像位置中心对齐

3 个答案: