Question

我不是一个经验丰富的网络开发人员，很快就会为了好玩而捣乱。我有一个1024 x 768背景图像的网页（我知道这可能是一个坏主意），如果浏览器宽度增加，我可以正确居中。但是，当浏览器宽度减小到768px以下时，我希望图像与宽度一起“居中”，而不是仅仅粘贴左上角，这样图像的中心始终与页面上的其他元素一致。

什么样的CSS魔法可以解决这个问题？

这是我的CSS：

body
    {
    background: #000000; /*Black bg for extra space not covered by img*/
    font-family: sans-serif;
    margin: 0px;

}

.wrap
{
    background: url(../images/background.jpg) no-repeat;
    background-attachment:fixed;
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: auto;
    /*Stretch body all the way to edges*/
    /*width: 1024px; /*Min width for site*/

}

感谢。

Answer 1

按照教程进行回应：

http://stephen.io/mediaqueries/

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

Answer 2

看看this website 这里显示的“Awesome，Easy，Progressive CSS3 Way”几乎就像你的代码一样。你需要改变以使图像水平和垂直居中的是将“中心”添加到背景设置：

.wrap{
  background: url(../images/background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: auto;
}

Answer 3

你试过了吗？

background-size: 100% 100%;

以及所有其他的CSS。这将确保您使用的背景图像将拉伸以适合屏幕尺寸（高度和宽度）

在较小宽度的屏幕上重新定位背景图像

3 个答案: