2

该站点在 BODY 中有一个“min-width:600px”，并在 Center 中使用了一个 backgroundImage。

当我调整大小并且它低于 600 像素时，它会创建滚动条，很好。但背景不会停止居中。背景忽略最小宽度。

我的例子在这里：http: //jsfiddle.net/XD4QM/

<html>
    <body>
        <div>
            background ignores the min-width

        </div>
    </body>
</html>



body{
    min-width:600px;
    background:url(http://mrknobbymusic.com/wp-content/uploads/2011/08/example-last-ones-standing.jpg) center top;

}

附加信息：

我有一个很大而且很糟糕的网站要修复。所以就像我想做的第一步一样。当这个人的宽度小于 1024 像素（600 只是一个例子）时，这个网站看起来很糟糕。所以我更喜欢水平滚动，让网站最小宽度：1024px，不要破坏网站。只是为了让客户满意，直到我重新制作和修复所有东西。

4

4 回答 4

1

更新 2：

jsfiddle.net/persianturtle/XD4QM/5

body{
    width:600px
    margin: 0 auto;
}

img {
    max-width:100%;
    min-width:800px;
    display: block; 
    margin-left: auto; 
    margin-right: auto
}

更新：

这个怎么样？

http://jsfiddle.net/persianturtle/XD4QM/3/

与其将图像放到无法控制的背景中，不如将图像放在可以控制的 div 中？

img {
    max-width:100%;
}

您没有告诉浏览器停止重复背景。

看看这个 jsFiddle：

http://jsfiddle.net/persianturtle/XD4QM/2/

body{
    min-width:600px;
    background:url(http://mrknobbymusic.com/wp-content/uploads/2011/08/example-last-ones-standing.jpg) center top;
    background-repeat:no-repeat;
}
于 2013-02-13T16:18:03.207 回答
1

就我而言，我现在这样做并工作了。

@media screen and (max-width :600px){
    body{
        background-position:-<tested value>px 0px;
    }
}
于 2013-02-13T16:20:28.003 回答
0

好吧，我不会采用上述任何一种方法，而是将代码更改为以下

background:url("http://mrknobbymusic.com/wp-content/uploads/2011/08/example-last-ones-standing.jpg") repeat scroll center top / cover transparent;

注意顶部/封面。封面确保背景始终与 div 一起调整大小，并且在这种情况下，当您调整书的大小时，将背景设置为书的封面，封面会自行调整大小

于 2013-02-13T18:10:12.770 回答
0

尝试在“滚动”和“固定”之间切换。background-attachment 属性设置背景图像是固定的还是与页面的其余部分一起滚动。

body{
    min-width:600px;
    background:url(example-last-ones-standing.jpg)
    center
    top
    scroll
    no-repeat;
}
于 2013-02-13T18:24:56.003 回答