CSS background-color 属性

实例

  1. body
  2.   {
  3.   background-color:yellow;
  4.   }
  5. h1
  6.   {
  7.   background-color:#00ff00;
  8.   }
  9. p
  10.   {
  11.   background-color:rgb(255,0,255);
  12.   }

浏览器支持


IE Firefox Chrome Safari Opera
ie firefox chrome safari opera

所有浏览器都支持 background-color 属性。

注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

定义和用法

background-color 属性设置元素的背景颜色。

元素背景的范围

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

transparent 值

尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。

默认值： transparent
继承性： no
版本： CSS1
JavaScript 语法： object.style.backgroundColor="#00FF00"

可能的值

值 描述
color_name 规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent 默认。背景颜色为透明。
inherit 规定应该从父元素继承 background-color 属性的设置。

实例

设置背景颜色

本例演示如何为元素设置背景颜色。

  1. <html>
  2. <head>
  4. <style type="text/css">
  6. body {background-color: yellow}
  7. h1 {background-color: #00ff00}
  8. h2 {background-color: transparent}
  9. p {background-color: rgb(250,0,255)}
  11. p.no2 {background-color: gray; padding: 20px;}
  13. </style>
  15. </head>
  17. <body>
  19. <h1>这是标题 1</h1>
  20. <h2>这是标题 2</h2>
  21. <p>这是段落</p>
  22. <p class="no2">这个段落设置了内边距。</p>
  24. </body>
  25. </html>

设置文本的背景颜色

本例颜色如何设置部分文本的背景颜色。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. span.highlight
  5. {
  6. background-color:yellow
  7. }
  8. </style>
  9. </head>
  11. <body>
  12. <p>
  13. <span class="highlight">这是文本。</span> 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 <span class="highlight">这是文本。</span>
  14. </p>
  15. </body>
  16. </html>

相关页面

CSS 教程：CSS 背景

HTML DOM 参考手册：backgroundColor 属性