如何使用 HTML 和 CSS 设置背景颜色-之路教程

←如何为 <img> 标签设置 background-size 属性的“cover”值的等效值

给 <body> 元素添加 style 属性

我们可以通过向 <body> 元素添加 style="background-color:" 来为 HTML 文档设置背景颜色。

使用 style 属性设置背景颜色的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body style="background-color:#1c87c9;">
    <h1>标题</h1>
    <p>今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。</p>
  </body>
</html>

如何使用 HTML 和 CSS 设置背景颜色

首先你应该知道的是，有不同类型的 HTML 颜色，例如十六进制颜色代码、HTML 颜色名称、RGB 和 RGBa 值、HSL 颜色等。

要选择我们喜欢的颜色，请使用我们的颜色工具。

在此代码中，我们可以找到许多不同的添加背景颜色的方法。
让我们从最简单的开始。

创建不断变化的背景

我们可以创建一个背景，它会在提到的时间改变其颜色。
为此，将动画属性添加到 <body> 元素。

使用@keyframes 规则设置我们将流过的背景颜色，以及每种颜色在页面上出现的时间长度。

创建变化背景的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        -webkit-animation: colorchange 20s infinite;
        animation: colorchange 20s infinite;
      }
      @-webkit-keyframes colorchange {
        0% {
          background: #8ebf42;
        }
        25% {
          background: #e6ebef;
        }
        50% {
          background: #1c87c9;
        }
        75% {
          background: #095484;
        }
        100% {
          background: #d0e2bc;
        }
      }
      @keyframes colorchange {
        0% {
          background: #8ebf42;
        }
        25% {
          background: #e6ebef;
        }
        50% {
          background: #1c87c9;
        }
        75% {
          background: #095484;
        }
        100% {
          background: #d0e2bc;
        }
      }
    </style>
  </head>
  <body>
    <h1>Changing Background</h1>
  </body>
</html>

百分比指定了“颜色变化”中提到的动画长度（例如 20 秒）。

创建带有渐变的背景

渐变背景可让我们在两种或者多种指定颜色之间创建平滑过渡。

有两种类型的渐变背景：线性渐变和径向渐变。

在线性渐变背景中，我们可以设置颜色的起点。
如果我们不提及起点，它会默认自动设置为“从上到下”。

设置线性渐变背景的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      #grad {
        height: 500px;
        background-color: blue;/* For browsers that do not support gradients */
        background-image: linear-gradient(to right, #1c87c9, #8ebf42);
      }
    </style>
  </head>
  <body>
    <h1>从右到左线性渐变背景</h1>
    <div id="grad"></div>
  </body>
</html>

给定的示例显示了从左侧开始的线性渐变。
它从蓝色开始，过渡到绿色。
根据要求更改它。

在径向渐变背景中，起点由其中心定义。

设置径向渐变背景的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      #grad {
        height: 500px;
        background-color: grey;/* For browsers that do not support gradients */
        background-image: radial-gradient(#e6ebef, #1c87c9, #8ebf42);
      }
    </style>
  </head>
  <body>
    <h1>径向渐变背景</h1>
    <div id="grad"></div>
  </body>
</html>

我们还可以像这样调整颜色的百分比：(color1 30%, color2 50%, color3 20%)。

将 CSS background-color 属性添加到 <body> 元素

background-color 属性用于更改背景颜色。

将它插入到 <body> 元素中，我们将拥有页面的全彩色封面。

使用 CSS background-color 属性设置背景颜色的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题 </title>
    <style>
      body {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body></body>
</html>

我们还可以为文档中的特定元素添加背景颜色。
例如，让我们看看如何更改标题和段落的颜色。

为特定元素添加背景颜色的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        background-color: #e6ebef;
      }
      h2 {
        background-color: #8ebf42;
      }
      p {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>经历过风雨，才懂得阳光的温暖。</h2>
    <p>今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
</p>
  </body>
</html>

让我们看另一个示例，我们向 <h1> 元素添加带有颜色名称值的背景颜色。

我们为 <h2> 指定 RGB 值，为 <p> 指定 HSL，为 <span> 元素指定 RGBa 值。

使用不同颜色类型设置背景颜色的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      h1 {
        background-color: lightblue;
      }
      h2 {
        background-color: rgb(142, 191, 66);
      }
      p {
        background-color: hsl(300, 100%, 25%);
      }
      span {
        background-color: rgba(255, 127, 80, 0.58);
      }
    </style>
  </head>
  <body>
    <h1>示例</h1>
    <h2>经历过风雨，才懂得阳光的温暖。</h2>
    <p>生活终归还得继续。</p>
    <span>把痛苦停在昨天 把微笑留给明天。</span>
  </body>
</html>

日期：2020-06-02 22:15:12 来源：oir作者：oir