HTML 背景图片

2025 年 3 月 25 日 | 阅读 3 分钟

HTML 文档中的 <background> 属性用于指定 HTML 页面或表格的背景图片。您可以将图片的路径作为 background 属性的值传递，以设置 HTML 页面或表格的图片。

语法

注意：HTML5 中不支持 Background 属性。请使用以下 CSS 语法

示例：以下示例以不同样式设置背景图片

示例 1：此示例将 background 属性与 body 标签一起使用，以将图片显示为网页的背景。

<!DOCTYPE html>
<html>
<head>
<title> 
Example of Background image
</title>
</head>
<body background="https://previews.123rf.com/images/kotenko/kotenko1403/kotenko140300008/26854631-snowy-winter-in-a-mountain-forest-sunny-cold-day-with-snow-covered-trees-carpathian-mountains-ukrain.jpg">

<font color="red">
<h1> click on this <a href=""> link </a> for the Home page of Our Website </h1>
</font>
</body>
</html>

输出

示例 2：此示例将 background 属性与 table 标签一起使用，以将图片显示为 html 表格的背景。

<!DOCTYPE html>  
<html>   
<head>  
<title>  
    Example of Background image 
</title>  
</head>  
<body>
<center>

In this example, we use the background attribute with the table tag, which displays the image as a background of the HTML table. 

<table background="https://images.pexels.com/photos/237272/pexels-photo-237272.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" height="300" border="1" width="500">
 
	<tr>
		<td> Roll No. </td>
		<td> Name </td>
	</tr>
	<tr>
		<td> 101 </td>
		<td> Abhay </td>
	</tr>
	<tr>
		<td> 102 </td>
		<td> Chetan </td>
	</tr>
	<tr>
		<td> 103 </td>
		<td> Manpreet </td>
	</tr>
	<tr>
		<td> 104 </td>
		<td> Rakesh </td>
	</tr>
	<tr>
		<td> 105 </td>
		<td> Sumit </td>
	</tr>
</table>
</center>  
</body>  
</html>

输出

示例 3：此示例将 CSS 语法用于 style 属性的 background-image 属性与 body 标签一起使用。

<!DOCTYPE html>  
<html>   
<head>  
<title>  
    Example of Background image 
</title>  
</head>  

<body style="background-image:url('https://previews.123rf.com/images/kotenko/kotenko1403/kotenko140300008/26854631-snowy-winter-in-a-mountain-forest-sunny-cold-day-with-snow-covered-trees-carpathian-mountains-ukrain.jpg');"> 

<font size="4" color="green">

In this example, we use the <b> background-image </b> property in the <b>style</b> attribute with the <b> body tag </b> which display the image as a background on the web page. 

</font>
<center>
<font size="4" color="red">
<table height="300" border="1" width="500">
	<tr>
		<td> Roll No. </td>
		<td> Name </td>
	</tr>
	<tr>
		<td> 101 </td>
		<td> Abhay </td>
	</tr>
	<tr>
		<td> 102 </td>
		<td> Chetan </td>
	</tr>
	<tr>
		<td> 103 </td>
		<td> Manpreet </td>
	</tr>
	<tr>
		<td> 104 </td>
		<td> Rakesh </td>
	</tr>
	<tr>
		<td> 105 </td>
		<td> Sumit </td>
	</tr>
</table>
</font>
</center>  
</body>  
</html>

输出

示例 4：此示例将 CSS 语法用于 style 属性的 background-image 属性与 table 标签一起使用。

<!DOCTYPE html>  
<html>   
<head>  
<title>  
    Example of Background image 
</title>  
</head>  
<body>
<font size="4" color="orange">
In this example, we use the <b> background-image property </b> in the <b> style attribute </b> with the <b> table tag </b> which display the image as a background of HTML table. 
</font>
<font size="4" color="red">
<center>

<table style="background-image:url('https://images.pexels.com/photos/237272/pexels-photo-237272.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');"> 
	<tr>
		<td> Roll No. </td>
		<td> Name </td>
	</tr>
	
	<tr>
		<td> 101 </td>
		<td> Abhay </td>
	</tr>
	<tr>
		<td> 102 </td>
		<td> Chetan </td>
	</tr>
	<tr>
		<td> 103 </td>
		<td> Manpreet </td>
	</tr>
	<tr>
		<td> 104 </td>
		<td> Rakesh </td>
	</tr>
	<tr>
		<td> 105 </td>
		<td> Sumit </td>
	</tr>
</table>
</center>  
</font>
</body>  
</html>

输出

示例 5：此示例将 CSS 语法用于 style 属性的 background-repeat 和 background-size 属性与 body 标签一起使用。

<!DOCTYPE html>  
<html>   
<head>  
<title>  
    Example of Background image 
</title>  
</head>  

<body style="background-image:url('https://images.pexels.com/photos/237272/pexels-photo-237272.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); 
background-repeat:no-repeat; background-size: 100% 100%"> 

<font size="4" color="green">

In this example, we use the <b> background-repeat and background-size property </b> in the <b> style attribute </b> with the <b> body </b> tag 
which display the image without repeatition. 

</font>
<center>

<font size="4" color="red">
<table height="300" border="1" width="500">
	<tr>
		<td> Roll No. </td>
		<td> Name </td>
	</tr>
	<tr>
		<td> 101 </td>
		<td> Abhay </td>
	</tr>
	<tr>
		<td> 102 </td>
		<td> Chetan </td>
	</tr>
	<tr>
		<td> 103 </td>
		<td> Manpreet </td>
	</tr>
	<tr>
		<td> 104 </td>
		<td> Rakesh </td>
	</tr>
	<tr>
		<td> 105 </td>
		<td> Sumit </td>
	</tr>
</table>
</font>
</center>  
</body>  
</html>

输出