0

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

什么样的 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*/

}

谢谢。

4

3 回答 3

0

你有没有尝试过 ：

background-size: 100% 100%;

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

于 2013-08-26T10:01:32.333 回答
0

看看这个网站 这里以“Awesome, Easy, Progressive CSS3 Way”显示的 CSS 几乎与您拥有的代码一样。您需要更改以使图像水平和垂直居中是在背景设置中添加“中心中心”：

.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;
}
于 2013-08-26T09:58:34.807 回答
0

按照教程进行响应：

http://stephen.io/mediaqueries/

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

于 2013-08-26T09:56:08.750 回答