参考资料

  1. HTML 背景颜色
  2. html结构标签详细说明以及案例
  3. HTML 删除字符效果和插入字符效果
  4. HTML 表格和边框属性
  5. HTML 视频(Videos)播放
  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：颜色属性基本标签背景色透明度格式化方式主要常用

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。