HTML5 中 background 属性是如何被弃用的?

html5web developmentfront end technology更新于 2025/2/23 11:24:17

本文将讨论 background 属性以及它在 HTML5 中是如何被弃用的。

什么是 background 属性?

在 HTML 中，"background" 可以作为 HTML 元素(例如 div、table、body 等)的属性使用。我们可以指定图片来设置网页的背景等。最常用的图片格式是 PNG、JPEG 和 GIF。

语法

以下是 HTML 元素 background 属性的语法 -

<table background = "/images/html.gif">
</table>

此属性在 HTML5 中已弃用，建议不要使用。在 HTML5 中，设置背景的首选方法是使用 CSS 而不是 HTML 属性。

在 HTML5 中，"background"是一个CSS 属性简写，可以设置所有背景样式属性(例如颜色、图像、重复、位置、大小和剪辑)。

语法

以下是 CSS 背景属性的语法 -

p {
   background-color: red;
}

示例

在下面的例子中，我们使用带有 HTML 元素的 background 属性 -

<!DOCTYPE html>
<html>
<head>
   <title>HTML Background Images</title>
</head>
<body   background="https://media.tenor.com/kgNBW3GoSRoAAAAd/beach-waves.gif"></body>
</html>

以下是上述程序的输出 -

示例

在下面的示例中，我们使用 CSS(层叠样式表)而不是 HTML 属性来指定 "background" 属性。

<!DOCTYPE html>
<html>
<head>
   <title>How background attribute is deprecated in HTML5</title>
   <style>
      div {
         border: solid 1px;
         border-radius: 5px;
         padding: 10px;
      }
      p {
         font-size: larger;
         text-align: center;
         color: white;
      }
      .mydiv {
         background-color: seagreen;
      }
   </style>
</head>
<body>
   <div class="mydiv">
      <p>Welcome to tutorialspoint</p>
   </div>
</body>
</html>

编译并运行上述程序，结果如下:

示例

这里，我们使用 CSS(层叠样式表)而不是 HTML 属性来指定 "background-color" 属性。

<!DOCTYPE html>
<html>
<head>
   <title>How background attribute is deprecated in HTML5</title>
   <style>
      p {
         font-size: larger;
         text-align: center;
         color: white;
      }
      .mydiv {
         background-color: seagreen;
      }
      body {
         background-color: beige;
      }
   </style>
</head>
<body>
   <div class="mydiv">
      <p>Welcome to tutorialspoint</p>
   </div>
</body>
</html>

当我们执行上述查询时，将获得如下输出 -