Question

对不起，我不知道如何更清楚地说出这个问题，但我的网页background-position目前设置为center。当我调整窗口大小时，它会保持在正中心，当窗口小于背景图像时，图像以居中为中心，因此左右边缘都会被切断。我遇到的问题是，当我使用margin:auto;时，我的div内容框将保留在中心，但当窗口调整为小于width:700px;的宽度时，左边 - 盒子的大部分边缘都在视线范围内，而最右边的窗户则隐藏在窗框外面。我真的很难解释，如果我不清楚，我很抱歉。我是网络开发的新手。这是截图示例：
http://puu.sh/7jnNV.jpg：好！一切都集中在一起 http://puu.sh/7jnPO.jpg：不好！背景图像保持居中于窗口的宽度，但div框停在最左边，然后从另一边跑开：
http://puu.sh/7jnSN.jpg：由于宽度是固定的，因此它会偏离背景的一侧，因为它偏离背景的中心。

以下是网页代码：

<head>
<style>
html, body {
    min-height: 100%
}
body {
    background-color: #ffffff;
    background-image: url(banner.png), url(footer.png), url(filler.png);
    background-position: center top, center bottom, center center;
    background-repeat: no-repeat, no-repeat, repeat-y;
}
</style>
</head>

<body>
<style>
div.content
{
width:700px;
padding:10px;
border:2px solid #004688;
margin:auto;
margin-top:400px;
margin-bottom: 135px;
}
</style>
<div class="content">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</div>
</body>

所以我认为最简单的解决方法是阻止背景滑过屏幕的最左边，这样一切都相对于彼此保持居中。但我不知道怎么做，谷歌搜索是无益的，因为我不知道wtf我甚至在谈论哈哈; c

Answer 1

将背景应用于容器div。

容器div的高度和宽度与背景相同。

现在使用CSS水平和垂直居中容器div。

Answer 2

http://www.w3schools.com/cssref/css3_pr_background-size.asp

也许使用background-size动态缩放图片？您可以使用cover或100%

限制背景滑过屏幕的最左边缘

2 个答案: