Question

我正在开发一个网页，我有以下CSS：

body {
    background: url('../images/numbers.png');
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    width: 1024px;
    height: 900px;
}

以下HTML：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Index</title>
    <link rel="stylesheet" href="css/common.css">
</head>

<body>

</body>

</html>

我已经为身体设置了一个尺寸（1024x900），但我在浏览器上看到了这个页面，我看到了numbers.png到处都是（我的显示器分辨率大于那个）。

如何仅在体内设置背景图像（定义为1024x900）？如何在Web浏览器中间居中？

顺便说一句，image numbers.png小于1024x900。

Answer 1

添加background-repeat:no-repeat;

使用以下方法对身体进行居中：margin:0px auto;

Answer 2

使用它：

body {
background: url('../images/numbers.png') no-repeat center center;
display:block;
width: 1024px;
height: 900px;
margin:0 auto;
}

Answer 3

最简单的方法是创建一个页面包装器：

<body>
  <div id="page"></div>
</body>

然后调整你的风格：

#page {
  background: url('../images/numbers.png') no-repeat;
  width: 1024px;
  height: 900px;
  margin: 0 auto;
}

这是一种常见的方法，如果您使用 viewport 执行操作，将会在以后节省麻烦，例如100％高度。

Answer 4

正文是您在页面中看到的所有内容“包括左侧和右侧的空格”

你需要有一个像这样的容器div

      body {
        font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    }
    #container {
        background: url('../images/numbers.png');
        width: 1024px;
        height: 900px;
        margin: 0 auto;
    }

    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <title>Index</title>
        <link rel="stylesheet" href="css/common.css">
    </head>
    <body>

    <div id="container" >
    <!-----page content goes here----->
    </div>

    </body>
    </html>

外面重复的图像

4 个答案: