HTML - 背景元素_HTML 菜鸟教程

网页的背景是其内容后面的一层，包括文本、图像、颜色和各种其他元素。

它是网页设计的重要组成部分，可以改善网页的整体外观以及用户体验。HTML 提供了多个属性和属性，用于操作文档中元素的背景。

默认情况下，我们的网页背景是白色的。我们可能不喜欢它，但不用担心。HTML 提供了以下两种很好的方法来装饰我们的网页背景。

带颜色的 HTML 背景
带有图像的 HTML 背景

语法

<body background = value>
<body style="background-color: value;">

该值可以是颜色的英文名称、颜色的RGB值或颜色的十六进制值

HTML 背景示例

下面是一些示例代码，演示如何为 HTML 文档设置不同样式的背景。

设置背景颜色

修改背景的基本方法是改变其颜色。background-color 属性有助于指定元素背景的颜色。这可以通过在 HTML 元素的开始标记中合并以下 style 属性来实现。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>样式划分示例</title>
</head>
<body>
	 <div style="background-color: #3498db; ">
			<h1>欢迎访问七科普网站</h1>
			<p>
				 这是一个带有样式的div的示例
				 背景颜色和文本颜色。
			</p>
			<!-- 此处显示其他内容 -->
	 </div>
</body>
</html>

将图像设置为背景

HTML 允许我们指定图像作为 HTML 网页或表格的背景。background 和 background-image 可用于控制 HTML 元素的背景图像，特别是页面正文和表格背景。我们只需要将图像的路径作为值传递给两个属性，如下例所示。在下面的示例中，background-image 属性分配给网页正文。

<!DOCTYPE html>
<html lang="en">
<head>
			<title>背景图像示例</title>
</head>
<body background="/market/public/assets/newDesign/img/logo.svg">
	 <div style="background-color: rgba(255, 255, 255, 0.8); padding: 20px;">
			<h1>欢迎访问七科普网站</h1>
			<p>
				 这是设置背景的示例
				 使用HTML属性的图像。
			</p>
	 </div>
</body>
</html>

背景重复和位置

虽然你可以只使用HTML将图像设置为背景，但为了控制它的行为，如重复和定位，我们需要使用CSS。我们建议您观看我们的 CSS 背景图像以更好地理解。CSS 提供了用于控制背景图像的重复方式及其位置的选项。background-repeat 属性指定图像是水平重复、垂直重复、两者重复还是两者都不重复。此外，background-position 属性使开发人员能够确定背景图像在元素中的位置。

下面的 HTML 程序创建一个网页，其中包含一个居中的内容 div，该 div 具有来自指定图像的重复垂直背景图案。容器的背景颜色默认设置为白色，容器内的文本样式为黑色，营造出视觉上吸引人且有凝聚力的设计。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML背景重复</title>
	 <style>
			body {
				 background-image: 
						url('/market/public/assets/newDesign/img/logo.svg');
				 background-repeat: repeat-y;
				 background-position: center;
				 justify-content: center;
				 align-items: center;
				 display: flex;
			}
			div{
				 background-color: rgba(255, 255, 255, 0.6); 
				 padding: 20px;
			}
	 </style>
</head>
<body>
	 <div>
			<h1>欢迎访问七科普网站</h1>
			<p>
				 这是设置背景的示例
				 使用HTML属性的图像。
			</p>
	 </div>
</body>
</html>

设置图案背景

您可能已经在各种网站上看到过许多图案或透明背景。这可以通过在背景中使用图案化图像或透明图像来实现。建议在创建图案或透明 GIF 或 PNG 图像时，使用尽可能小的尺寸，即使小至 1x1，以避免加载速度过慢。

下面是一个设置表背景模式的示例。

<!DOCTYPE html>
<html>
<head>
	 <title>HTML背景图像</title>
</head>
<body>
<!-- 使用模式设置表格背景 -->
<table background = "/images/pattern1.gif" 
				 width = "100%" 
				 height = "100">
	 <tr>
			<td>
				 这个背景充满了图案图像。
			</td>
	 </tr>
</table>
<!-- 表背景使用模式的另一个例子 -->
<table background = "/images/pattern2.gif" 
				 width = "100%" 
				 height = "100">
	 <tr>
			<td>
				 这个背景充满了图案图像。
			</td>
	 </tr>
</table>
</body>
</html>

<< HTML - ID （标识网页元素唯一的属性） HTML - 表格 >>