HTML设置背景颜色，你还在用过时的`bgcolor`属性吗？该属性已被W3C弃用，不利于网站维护和SEO优化。本文详细介绍如何使用现代CSS的`background-color`属性，通过内联样式、内部样式表和外部样式表三种方式设置HTML背景颜色。其中，外部样式表更利于样式的复用和管理，提升网站性能。此外，还介绍了如何使用CSS的`background-image`属性设置背景图片，以及利用`linear-gradient()`和`radial-gradient()`函数创建炫酷的渐变背景。最后，针对背景颜色设置不生效的常见原因，如CSS优先级冲突、样式表加载顺序错误等，提供详细的排查和解决方案，助你轻松掌握HTML背景颜色的设置技巧，打造更美观、更专业的网站。

设置HTML背景颜色的核心方法是使用CSS而非bgcolor属性，因为bgcolor已被W3C弃用且不利于维护；推荐通过内联样式、内部样式表或外部样式表三种方式应用CSS，其中外部样式表最利于样式复用与管理；bgcolor属性曾用于直接在HTML标签中设置背景色，如表格背景，但因降低可读性、无法复用且已被弃用而不应再使用；要实现更丰富的背景效果，可使用CSS的background-image属性设置背景图片并配合background-size、background-position等控制显示，或使用linear-gradient()和radial-gradient()函数创建渐变背景；若仅需为特定元素设置背景色，可通过内联style或定义CSS类（如.green-background）将其应用于div等个别元素；当背景颜色未生效时，可能原因包括CSS优先级冲突、样式表加载顺序错误、元素被遮挡、语法错误或滥用!important，需逐一排查以确保样式正确渲染。

HTML设置背景颜色，核心在于使用CSS样式，而非过时的bgcolor属性。虽然bgcolor在一些老旧代码中可能见到，但强烈建议避免使用，因为它已被W3C标准弃用。使用CSS能提供更强大、灵活和标准化的背景颜色设置方式。

解决方案

设置HTML背景颜色，主要有两种方式：内联样式和内部/外部样式表。

1. 内联样式： 直接在HTML元素中使用style属性。

   
     
   这是一个标题
     
   这是一个段落。
   

   这种方式简单直接，但不利于维护和复用。只适用于少量、临时的样式修改。

2. 内部/外部样式表： 在中使用

   这是一个标题

   这是一个段落。

3. 外部样式表：

   首先，创建一个名为 styles.css 的文件，并写入以下内容：

   body {
     background-color: lightblue;
   }

   然后，在HTML文件中链接该CSS文件：

   
   
   
     
   
   
   
   这是一个标题
   这是一个段落。
   
   
   

推荐使用外部样式表，因为它能够将样式与HTML结构分离，便于维护、复用和管理。

bgcolor属性的作用是什么？

bgcolor属性是HTML 4.01及更早版本中用于设置元素背景颜色的属性。它可以直接在HTML标签中使用，例如：

  

    
单元格 1
    
单元格 2
  

虽然简单易用，但bgcolor属性存在以下缺点：

• 可读性差： 将样式信息直接嵌入HTML中，降低了代码的可读性和可维护性。
• 不利于样式复用： 无法在多个元素之间共享样式。
• 已被弃用： W3C已将其标记为不推荐使用，未来可能会被浏览器完全移除。

因此，应避免使用bgcolor属性，转而使用CSS样式来设置背景颜色。

如何使用CSS设置更丰富的背景效果？

除了纯色背景，CSS还提供了更丰富的背景效果，例如背景图片、渐变色等。

• 背景图片： 使用background-image属性设置背景图片。

  body {
    background-image: url("image.jpg");
  }

  还可以结合background-repeat、background-position、background-size等属性来控制背景图片的显示方式。 例如，background-size: cover; 可以让背景图片自动缩放以覆盖整个元素。

• 渐变色： 使用linear-gradient()或radial-gradient()函数创建渐变色背景。

  body {
    background-image: linear-gradient(to right, red , yellow);
  }

  linear-gradient() 创建线性渐变，radial-gradient() 创建径向渐变。可以指定多个颜色和渐变方向，实现各种炫酷的背景效果。 渐变这东西，多试试不同的参数，会有意想不到的惊喜。

如何设置特定元素的背景颜色，而不是整个页面？

很多时候，我们并不需要改变整个页面的背景颜色，而是只想改变某个特定元素的背景颜色。 方法也很简单，只需要将CSS样式应用到对应的元素即可。

例如，要设置一个

  这是一个绿色的div。

  这是一个绿色的div。