2

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

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>
4

3 回答 3

1

你试过这个吗？

#container {
    background: url("url");
    background-repeat:no-repeat;
    background-position:fixed;
}
于 2013-04-02T07:07:04.767 回答
1

试试这个代码 -

#container {
    background: transparent url("url") 0 0 no-repeat;
    width: 100%;
}
于 2013-04-02T07:09:15.467 回答
0

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

#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 */
}
于 2013-04-02T07:09:12.227 回答