HTML 如何设置网页的背景图片

美观的网页是吸引用户注意力的强大工具。在本文中，我们将学习如何将一张图片设置为网页的背景图片。

方法

有两种方法可以将图片设置为网页的背景图片，本文将介绍它们。它们是：

使用背景属性
使用CSS

方法1：使用背景属性

我们可以在标签中使用背景属性来设置一张图片作为网页的背景。我们需要指定想要设置为背景属性的图片的URL或位置。

语法

<body background = "URL or Path of Image">Body of the Webpage</body>

示例

第一步 − 首先我们会定义HTML代码。

<!DOCTYPE html>
<html>
<head>
   <title>How to add an image as background image of a web page?</title>
</head>
<body>
   <h4>How to add an image as background image of a web page?</h4>
</body>
</html>

第二步 − 现在我们将编辑body标签，将本地文件image.jpg作为背景图像。

<body background="image.jpg">

这里是完整的代码-

<!DOCTYPE html>
<html>
<head>
   <title>How to add an image as background image of a web page?</title>
</head>
<body background="image.jpg">
   <h4>How to add an image as background image of a web page?</h4>
</body>
</html>

方法2：使用CSS

我们还可以使用CSS将任何图像设置为网页的背景。要这样做，我们需要指定所需图像的位置或URL给 background-image 属性。

语法

body {
   background-image: url(" URL of the Image");
}

例子

第一步 - 首先我们要定义HTML代码。

<!DOCTYPE html>
<html>
<head>
   <title>How to add an image as background image of a web page?</title>
</head>
<body>
   <h4 style="background-color: white;">How to add an image as background image of a web page?</h4>
</body>
</html>

第二步 − 现在我们将添加CSS。

<style>
   body{
      background-image: url("https://www.tutorialspoint.com/images/logo.png");
   }
</style>

下面是完整的代码 −

<!DOCTYPE html>
<html>
<head>
   <title>How to add an image as background image of a web page?</title>
   <style>
      body {
         background-image: url("https://www.tutorialspoint.com/images/logo.png");
      }
   </style>
</head>
<body>
   <h4 style="background-color: white;">How to add an image as background image of a web page?</h4>
</body>
</html>

结论

在这篇文章中，我们看到了如何将一张图片设为网页的背景。我们讨论了两种不同的方法来完成这个任务。首先，我们看到了通过使用background属性来实现这个任务。之后，我们还看到了如何使用CSS来实现同样的效果。