Question

当我调整窗口大小时，背景图像也会移动并调整大小，我不希望它调整大小，我希望它保持静态。我真的很困惑如何让我的背景保持静止。如果我设置宽度（以像素为单位），那么它将保持静态，但根据不同的屏幕尺寸，这不是一个好的选择

body {
    background-color: #000000;
    margin: 0 auto;
    width: 100%;
}

#container {
    background: url("url") no-repeat scroll center top transparent;
    width: 100%;
}

代码如下：

<body>
<div id="container">
</div>
</body>

Answer 1

试试这段代码 -

#container {
    background: transparent url("url") 0 0 no-repeat;
    width: 100%;
}

Answer 2

你试过这个吗？

#container {
    background: url("url");
    background-repeat:no-repeat;
    background-position:fixed;
}

Answer 3

如果您将图像设置为width:100%，则图像将随屏幕调整大小。如果您希望它只是坐在顶部中心而不缩放，那么您可以使用position:fixed，显式width，然后将其正确定位。

#container {
    background:url("url") no-repeat scroll center top transparent;
    background-position:fixed;
    position:fixed;
    width:500px; /* width of image */
    height:auto;
    top:0;
    left:50%;
    margin-left:-250px; /* -1/2 width */
}

不要在窗口调整大小时移动背景图像，保持静态

3 个答案: