Question

我提供了一些HTML / CSS，我将页面置于中心位置并尝试在中心页面的任一侧（或其后面）获取图像，但我不确定如何。

对不起解释，这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <style>

      body {
        background-image: url("/images/background.png")
        }

      #wrap {
        width: 700px;
        margin: 0 auto;
        }

      hr.one {
        margin-top: 5px;
        margin-bottom: 5px;
        }

    </style>
  </head>
  <body>

    <title>ItzJavaCraft | Home</title>

    <div id="wrap">

      <h1 align="center">ItzJavaCraft</h1>
      <hr class="one">
      <p>More coming soon...</p>

    </div>

  </body>
</html>

我希望能够在页面左侧和右侧获得background.png。

P.S：对不起我在这里做错了什么，我是新人。

任何帮助都会很棒！

谢谢，

-ItzJavaCraft

Answer 1

这是一种在背景中获取一个图像的全宽和高度的方法。

body {
  background: url("http://placehold.it/400x300/ff66cc/ffffff&text=icon1") no-repeat center center fixed; 
  background-size: cover;
}

#wrap {
  width: 700px;
  margin: 0 auto;
}

hr.one {
  margin-top: 5px;
  margin-bottom: 5px;
}

<title>ItzJavaCraft | Home</title>

<div id="wrap">

  <h1 align="center">ItzJavaCraft</h1>
  <hr class="one">
  <p>More coming soon...</p>

</div>

Answer 2

有一个简单的错误导致后台无法显示：相对URL不应以“/”开头（当然，除非您想使用绝对路径并使用系统，其中/指向您的根目录）。此外，您还需要使用background-size或background-repeat属性来使图像填满整个页面。

如果您希望“wrap”元素保持白色，您可以只为该元素添加背景颜色（根据需要调整元素的大小以获得您正在寻找的覆盖范围）。

Answer 3

background-image属性为元素设置一个或多个背景图像。元素的背景是元素的总大小，包括填充和边框（但不是边距）。默认情况下，背景图像放置在元素的左上角，并垂直和水平重复。

提示：如果图像是，请始终设置要使用的背景颜色如果你想在背景图片中提供一个位置，你可以使用一些属性，如：

属性：

background-position

此外，您可以使用简写空白代码，但如果这对您来说很难使用，您可以将其分开，如：

页面的完整背景图片：

background-position: cover;

或者，如果您想更改排名，可以使用center，left，right和top

例如：

background-position: center top;

或

background-position: left center;

或

background-position: top center;

等。您可以在此处了解有关此属性的更多示例： http://www.w3schools.com/cssref/pr_background-image.asp

中心页面背后的图像？

3 个答案: