如何在HTML中设置背景图片？
对于网站设计来说，背景图片的使用可以给网站增添更多的美感和视觉效果。本文将介绍如何通过HTML代码来设置网页的背景图片。
1.通过<body>标签添加背景图片
在HTML中，最常用的设置背景图片的方法就是通过给<body>标签添加background属性来实现。下面是一个简单的HTML代码，通过background属性来设置背景图片。
<!DOCTYPE html>
<html>
<head>
<title>设置背景图片</title>
<style>
/* 定义背景图片 */
body {
background: url("picture.jpg");
background-size: cover;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这里是段落</p>
</body>
</html>
代码中的background属性接受要作为背景的图片的URL作为值。在这个示例中，我们将图片名设置为picture.jpg。可以看到，这个CSS样式也包括了 background-size属性，这是控制背景图片大小的属性。我们在这里设置为cover，这样背景图片可以扩展到整个页面。
要注意，这种方法有一个很明显的问题是：这将导致所有的页面元素都被作为背景图片包含在内。这可能会导致页面结构和布局受影响。因此，我们更常用的方法是使用CSS样式来设置背景图片。
2.使用CSS样式设置背景图片
在HTML中，CSS样式是用来为文档添加样式和布局的。下面是一个示例代码，演示如何使用CSS样式来为HTML文档添加背景图像。
<!DOCTYPE html>
<html>
<head>
<title>设置背景图片</title>
<style>
/* 自定义CSS样式 */
body {
background-image: url("picture.jpg");
background-size: cover;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这里是段落</p>
</body>
</html>
可以看到，我们将CSS样式放入style标签中，然后给body元素添加了background-image属性。这个属性接受一张图片的URL作为值，它将图片作为背景添加到页面中。注意，我们将background修改为background-image，在CSS中，我们需要使用background-image属性来添加背景图片。
3.设置重复背景图片
我们不仅可以添加图片作为背景，还可以通过background-repeat属性来控制图片的平铺方式。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>重复背景图片</title>
<style>
body {
background-image: url("picture.jpg");
background-repeat: repeat-y;
background-size: 200px 300px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这里是段落</p>
</body>
</html>
在上述代码中，我们将background-repeat属性设置为repeat-y，表示在“y”轴上（垂直方向）重复平铺背景图片。还可以使用其他的重复属性值，如repeat-x，repeat和no-repeat。我们将background-size属性设置为200px 300px，指示背景图片的大小。
4.固定背景图片
如果希望背景图片不会随着用户滚动而移动，可以使用CSS的background-attachment属性。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>固定背景图片</title>
<style>
body {
background-image: url("picture.jpg");
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这里是段落</p>
</body>
</html>
上述代码中，我们给body元素添加了background-attachment属性，这个属性接受fixed和scroll作为选项。我们将这个属性设置为fixed，将背景图片固定在视口内。
5.使用CSS选择器设置背景图像
在HTML中，我们可以使用CSS选择器来为不同元素设置不同的背景图片。以下面的HTML代码为例：
<!DOCTYPE html>
<html>
<head>
<title>使用CSS选择器设置背景图片</title>
<style>
body {
background-image: url("background.jpg");
background-size: cover;
}
#header {
background-image: url("header.jpg");
background-size: contain;
}
#footer {
background-image: url("footer.jpg");
background-size: contain;
}
</style>
</head>
<body>
<div id="header">
<h1>头部</h1>
</div>
<h2>标题</h2>
<p>这里是段落</p>
<div id="footer">
<p>? 2022 公司名称。版权所有。</p>
</div>
</body>
</html>
这样，我们就可以在HTML中使用不同的背景图像来美化页面了。在上面的代码中，我们使用了ID选择器（#header和#footer）来选择页眉和页脚元素，并给它们添加不同的背景图像。可以看到，我们设置了不同的值来控制这些背景图片的大小和定位。
总结
在HTML中，设置背景图片的方法非常简单，可以使用background属性或CSS样式来添加背景图像。此外，通过使用重复属性和附加属性，可以更好地控制背景图片的外观和行为。同时，使用CSS选择器来设置不同元素的不同背景图片也是非常有用的。在对网站进行美化和优化时，背景图片可以起到相当重要的作用。