HTML - 背景图像

HTML 允许我们为 div、span、table 等元素或整个页面设置背景图像。

如何设置背景图片？

您可以使用 CSS 属性为任何 HTML 元素设置背景图像。此外，您还可以使用 HTML background 属性来设置 HTML 元素或整个页面的背景。该属性已弃用，建议使用 CSS 样式表进行背景设置。以下是将背景图像 background-image 与任何 HTML 标签一起使用的语法。

在 HTML 中：在 CSS 中：


<tag background="URL/of/image">

tag {
	 	 background-image: url('URL/of/image"');
	 	 background-repeat: no-repeat;
}

例

以下示例演示如何为网页设置背景图像。


<!DOCTYPE html>
<html lang="en">

<head>
<style>
	 	 div{
	 	 	 	 background-color: rgba(255, 255, 255, 0.8);
	 	 	 	 padding: 20px;
	 	 }
</style>
</head>

<body background="/html/images/logo.png">
	 	 <div>
	 	 	 	 <h1>Welcome to My Website</h1>
	 	 	 	 <p>
	 	 	 	 	 	 This is an example of setting a	
	 	 	 	 	 	 background image using HTML	
	 	 	 	 	 	 attributes.
	 	 	 	 </p>
	 	 </div>
</body>

</html>

Background Repeat 属性

有时我们为元素设置的背景图像不够大，无法覆盖元素的所有区域。在这种情况下，图像将在水平和垂直方向上重复，直到到达元素的末尾。为避免重复背景图像，您可以将 background-repeat 属性设置为 no-repeat

例

以下示例显示了如何使用背景图像 repeat 属性。这解释了如何在 HTML 中使用 repeat、repeat-x 和 repeat-y 属性。


<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Repeat Example</title>
<style>
	 	 body {
	 	 	 	 display: flex;
	 	 	 	 flex-direction: column;
	 	 	 	 align-items: center;
	 	 	 	 gap: 20px;
	 	 	 	 }

	 	 div {
	 	 	 	 width: 600px;
	 	 	 	 height: 200px;
	 	 	 	 border: 1px solid black;
	 	 	 	 display: flex;
	 	 	 	 justify-content: center;
	 	 	 	 align-items: center;
	 	 	 	 background-image: url('/html/images/logo.png');	
	 	 }

	 	 .repeat-x {
	 	 	 	 background-repeat: repeat-x;
	 	 }

	 	 .repeat-y {
	 	 	 	 background-repeat: repeat-y;

	 	 }

	 	 .repeat {
	 	 	 	 background-repeat: repeat;

	 	 }
</style>
</head>

<body>
	 	 <h2>Repeat-X</h2>
	 	 <div class="repeat-x">
	 	 </div>

	 	 <h2>Repeat-Y</h2>
	 	 <div class="repeat-y">
	 	 </div>

	 	 <h2>Repeat</h2>
	 	 <div class="repeat">
	 	 </div>
</body>

</html>

背景封面

如果希望背景图像覆盖整个元素，可以将 background-size 属性设置为 cover。通过设置此设置，背景图像将覆盖所有元素部分而不会拉伸它。

例

以下示例演示如何在整个元素区域中覆盖图像。


<!DOCTYPE html>
<html lang="en">

<head>
<style>
	 	 .background-cover {
	 	 	 	 background-image: url('/html/images/logo.png');
	 	 	 	 /* Cover the entire container */
	 	 	 	 background-size: cover;	
	 	 	 	 /* Center the image */
	 	 	 	 background-position: center;	
	 	 	 	 background-repeat: no-repeat;
	 	 	 	 width: 100%;
	 	 	 	 height: 150px;
	 	 	 	 color: white;
	 	 	 	 text-shadow: 1px 1px 2px black;
	 	 	 	 border: 2px solid #ccc;
	 	 }
</style>
</head>

<body>
	 	 <div class="background-cover">
	 	 	 	 <h1>Welcome to My Website</h1>
	 	 </div>
</body>
</html>

Background Stretch 属性

通过将 background-size 属性设置为 100%，您可以拉伸图像以适合元素。

例

以下示例演示如何使用 stretch 属性。


<!DOCTYPE html>
<html lang="en">
<head>

<style>
	 	 body {
	 	 	 	 height: 100vh;
	 	 }
	 	 .background-stretch {
	 	 	 	 background-image: url('/html/images/logo.png');	
	 	 	 	 /* Stretch the image to cover Div */
	 	 	 	 background-size: 100% 100%;
	 	 	 	 width: 80%;
	 	 	 	 height: 80%;
	 	 	 	 border: 2px solid;
	 	 }
</style>
</head>

<body>
	 	 <div class="background-stretch">
	 	 </div>
</body>
</html>

打印本页