HTML教程
HTML5教程
HTML参考手册

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>
输出:
 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>
输出:
 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>
输出:
 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>
输出:
 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>
输出:
 HTML背景图像

浏览器支持

元素  chrome浏览器 浏览器  firefox浏览器 Opera浏览器  Safari浏览器
背景图片
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4