HTML中如何设置背景图片?
HTML背景图片
HTML 文档中的
<background>属性用于在广告素材上指定背景图片HTML页面或表格。您可以将图像的路径作为
background属性的值进行传递,以设置HTML页面或表格的图像。
语法
<tag background="Path_of_an_image">
注意: HTML5不支持Background属性。使用以下CSS语法:
<tag style="background-image:Path_of_an_image)">
示例:以下示例以不同的样式设置背景图像:
示例1:本示例使用
背景属性和
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="https://www.lidihuo.com/"> link </a> for the Home page of Our Website </h1>
</font>
</body>
</html>
输出:
示例2:此示例将
background 属性与
表标记一起使用将图像显示为
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语法带有body标签的style属性的属性。
<!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:该示例对style属性中的background-image属性使用CSS语法,表标签。
<!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:此示例对带有body标签的style属性的
background-repeat和background-size 属性使用CSS语法。
<!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>
输出:
浏览器支持