给网页添加背景图片html_如何使用HTML将背景图像添加到网页的顶部

亦凉 2022-11-28 15:27 265阅读 0赞

给网页添加背景图片html

**[How To Build a Website With HTML][] [如何使用HTML构建网站][How To Build a Website With HTML]**

This tutorial series will guide you through creating and further customizing [this website][] using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the [beginning of the series][How To Build a Website With HTML] if you wish to recreate the demonstration website.

本教程系列将指导您使用HTML(用于在Web浏览器中显示文档的标准标记语言)创建和进一步自定义[此网站][this website] 。 不需要任何编码经验，但是如果您希望重新创建演示网站，建议您从[本系列][How To Build a Website With HTML]的[开头开始][How To Build a Website With HTML] 。

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

在本系列的最后，您应该拥有一个可以部署到云的网站，并且对HTML有了基本的了解。 知道如何编写HTML将为学习其他前端Web开发技能(例如CSS和JavaScript)奠定坚实的基础。

In this tutorial we’ll learn how to use a `<div>` container to structure the top section of the webpage. We will use the `style` attribute to specify the height of our `<div>` container, apply a background image, and specify that the background image should cover the entire area of the `<div>` container.

在本教程中，我们将学习如何使用`<div>`容器来构造网页的顶部。 我们将使用`style`属性指定`<div>`容器的高度，应用背景图像，并指定背景图像应覆盖`<div>`容器的整个区域。

Before we get started, we’ll need a background image. You may download and use our demonstration site’s [background image][] for the purpose of the tutorial, or you can choose a new image. (For a refresher on how to add images to webpages using HTML, please visit our tutorial [HTML Images][] from earlier in this tutorial series).

在开始之前，我们需要背景图片。 您可以下载并使用我们的演示站点的[背景图像][background image]来完成本教程，也可以选择一个新图像。 (有关如何使用HTML向网页添加图像的更新，请访问本系列教程前面的[HTML图像][HTML Images]教程)。

Once you’ve chosen your background image, save the image in your `images` folder as `background-image.jpg`.

选择背景图像后，将图像另存为`images`文件夹中的`background-image.jpg` 。

Next, paste the highlighted code snippet into your `index.html` file below the opening `<body>` tag and above the closing `</body>`:

接下来，将突出显示的代码段粘贴到您的`index.html`文件中，该标记在`<body>`标记下方和`</body>`上方：

. . .
    <body>
    
    <div style="background-image: url('Image_Location'); background-size: cover;; height:540px;
    </div>
    </body>
    </html>

Make sure to switch the text that says `Image_Location` with the file path of your image and don’t forget to add the closing `</div>` tag.

确保用图片的文件路径切换表示`Image_Location`的文本，并且不要忘记添加结束`</div>`标记。

Note that we have added the comment `` to help organize our HTML code. A comment is a piece of code that is ignored by the browser. Comments are used to help explain or organize code to developers. They are created with the opening tag ``.

请注意，我们添加了注释``以帮助组织HTML代码。 注释是浏览器会忽略的一段代码。 注释用于帮助向开发人员解释或组织代码。 它们是用开始标记`` 。

Save the file and reload it in the browser. You should receive something like this:

保存文件并将其重新加载到浏览器中。 您应该会收到以下信息：

Alternately, you can use a background color instead of a background image. To use a background color, replace the `<div>` element code snippet you just created with the following highlighted `<div>` element code snippet like this:

或者，您可以使用背景色代替背景图像。 要使用的背景颜色，更换`<div>`元素的代码段，您只需用以下突出显示创建`<div>`元素的代码片段是这样的：

...
    <body>
     <div style="background-color: #f4bc01; height:540px;"> 
    </div>
    </body>
    </html>

Save the file and reload it in the browser to check your results. The background image should now be replaced with a container that is the same size but has a solid yellow color.

保存文件，然后将其重新加载到浏览器中以检查结果。 现在应使用大小相同但颜色为黄色的容器替换背景图片。

If you compare the `<div>` container on your site with the same `<div>` container on the [demonstration site][], you may notice that your webpage’s `<div>` container is surrounded by a small margin of white space. This margin is due to the fact that all HTML pages are automatically set to have a small margin by default.

如果比较`<div>`与同一网站上的容器`<div>`在容器[示范点][demonstration site] ，你可能会注意到你的网页的`<div>`容器是由白色空间小幅度的包围。 此裕度是由于以下事实：默认情况下，所有HTML页面均自动设置为较小的裕度。

To remove this margin, we need to add a style attribute to the opening `<body>` tag that sets the margin of the `<body>` element of the HTML page to 0 pixels. Locate the opening `<body>` in your `index.html` file and modify it with the highlighted code:

要删除此空白，我们需要在开始的`<body>`标记中添加一个style属性，以将HTML页面的`<body>`元素的空白设置为0像素。 在`index.html`文件中找到开头的`<body>` ，并使用突出显示的代码对其进行修改：

Save and reload the file in your browser. There should now be no white margin surrounding the top `<div>` container.

在浏览器中保存并重新加载文件。 现在，顶部`<div>`容器周围应该没有白边。

You should now know how to add a `<div>` container with a background image to structure the top section of a webpage.

现在，您应该知道如何添加带有背景图像的`<div>`容器来构造网页的顶部。

> 翻译自: [https://www.digitalocean.com/community/tutorials/how-to-add-a-background-image-to-the-top-section-of-your-webpage-with-html][https_www.digitalocean.com_community_tutorials_how-to-add-a-background-image-to-the-top-section-of-your-webpage-with-html]

给网页添加背景图片html

[How To Build a Website With HTML]: https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html
[this website]: http://html.sammy-codes.com/
[background image]: https://html.sammy-codes.com/images/background.jpg
[HTML Images]: https://www.digitalocean.com/community/tutorials/html-images
[demonstration site]: https://html.sammy-codes.com/
[https_www.digitalocean.com_community_tutorials_how-to-add-a-background-image-to-the-top-section-of-your-webpage-with-html]: https://www.digitalocean.com/community/tutorials/how-to-add-a-background-image-to-the-top-section-of-your-webpage-with-html