参考资料

  1. 如何添加按钮的过渡动画效果？
  2. HTML id 属性在 JavaScript 中的使用
  3. HTML 水平线
  4. HTML 图像
  5. HTML 有用的提示
  6. HTML 用于短的引用
  7. html表单标签详细说明以及案例
  8. HTML 块引用格式化

HTML 背景颜色格式化

基本介绍

HTML 背景颜色可以通过多种方式设置，主要使用 background-color 属性。

常用标签和属性

  1. <body> 标签的背景色

  2. <div>, <p>, <table> 等元素的背景色

  3. style 属性中的 background-color

  4. CSS 中的 background-color 属性

颜色表示方法

  1. 颜色名称：red, blue, green 等

  2. 十六进制：#RRGGBB 或 #RGB

  3. RGB：rgb(255, 0, 0)

  4. RGBA：rgba(255, 0, 0, 0.5)（带透明度）

  5. HSL：hsl(120, 100%, 50%)

  6. HSLA：hsla(120, 100%, 50%, 0.3)（带透明度）

基本用法

<!-- 内联样式 -->
<div style="background-color: lightblue;">内容</div>

<!-- 内部样式表 -->
<style>
  .highlight {
    background-color: yellow;
  }
</style>
<p class="highlight">高亮文本</p>

<!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">

实例

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
    .box {
      background-color: rgba(0, 128, 0, 0.5);
      width: 200px;
      height: 100px;
      padding: 20px;
    }
    #header {
      background-color: hsl(240, 100%, 50%);
      color: white;
    }
  </style>
</head>
<body>
  <div id="header">标题</div>
  <div class="box">半透明绿色背景</div>
  <p style="background-color: #ffcc00;">黄色段落</p>
</body>
</html>

CSS 扩展功能

  1. 渐变背景：

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

  2. 多背景：

    .multi-bg {
  background: url(image1.png), url(image2.png), linear-gradient(blue, pink);
  background-blend-mode: screen;
}

  3. 背景图片和颜色组合：

    .combined {
  background-color: #ffebcd;
  background-image: url("paper.gif");
}

  4. 背景定位和重复：

    .positioned {
  background-color: #eee;
  background-image: url("logo.png");
  background-repeat: no-repeat;
  background-position: right top;
}

  5. 背景大小：

    .sized {
  background-image: url("img.jpg");
  background-size: cover;
}

  6. 背景固定：

    .fixed {
  background-attachment: fixed;
}

  7. 背景裁剪：

    .clipped {
  background-clip: content-box;
}

  8. 背景原点：

    .origin {
  background-origin: border-box;
}
TAG：颜色属性基本标签背景色透明度格式化方式主要常用