CSS背景颜色

本教程包括使用CSS添加固定或可变宽度背景颜色的基础知识。我们还将演示怎样仅用几行代码创建完美的响应颜色方块。

主体背景颜色

CSS中，背景被看作是一个元素的宽度和高度，以及任何填充和边框（不是外边距）。使用CSS background-color属性，我们就能将HTML页面的<body>背景设为红色。

HTML
<head>
  <style>
    body { background-color: #FF0000; }
  </style>
</head>
<body>
</body>

演示的CodePen

非常简单，对吧！当然，您也可以一直使用ID或类（class）为<body>元素设置背景颜色，但这是最简单的方法。接下来我们来看一些设置页内元素颜色的方法，例如<div>。

尺寸固定的元素背景颜色

对于尺寸――无论是像素、行长或百分比――固定的HTML元素来说，添加背景颜色很容易。我们可以简单地使用上一步的CSS代码来指定一个蓝色背景的固定宽度和高度<div>。

HTML
<head>
  <style>
    div { 
      width: 50%;
      height: 200px;
      background-color: #00FF00; 
    }
  </style>
</head>
<body>
  <div></div>
</body>

演示的CodePen

然而，如果我们从CSS代码中去掉高度或宽度，背景颜色就会消失。您可以自己在样本中尝试一下。

尺寸可变的元素背景颜色

非常好，但是如果我们不知道HTML元素的尺寸怎么办？只要您想加入背景的元素内部有一个元素，我们就能使用CSS填充属性为外部元素指定某种颜色。

HTML
<head>
  <style>
    div {
      padding: 16px;
      background-color: #00FF00;
    }
  </style>
</head>
<body>
  <div>
    <h1>Title with a background color</h1>
  </div>
</body>

演示的CodePen

响应颜色方块

这种方法使用定位和填充固定宽度的组合来创建出完美的响应方块背景色彩。事实上您可以通过改变CSS padding-bottom属性去创建任意比例的矩形。

HTML
<head>
  <style>
    .outer { 
      position: relative;
      width: 25%;
      padding-bottom: 25%;
    }
    .inner {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #00FF00; 
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>

演示的CodePen

如果您觉得这对您有帮助，请务必查看我们其他关于CSS文字颜色、链接颜色以及占位符颜色的教程。