CSS 背景与颜色（Background & Colors） 6背景属性 (Background Properties)

一、背景属性 (Background Properties)

这些属性用于控制元素的背景外观。

1. background-color

-   **作用:** 设置元素的背景颜色。

-   **值:**

    -   <color>: 任何有效的 CSS 颜色值（见下文颜色值类型）。
    -   transparent: 透明背景（默认值）。

-   **示例:** background-color: lightblue;, background-color: #f0f0f0;, background-color: rgba(0, 0, 0, 0.5);

2. background-image

-   **作用:** 设置元素的背景图片。可以设置一个或多个背景图片（用逗号分隔）。

-   **值:**

    -   none: (默认值) 无背景图片。

    -   url(<url>): 指定图片文件的路径。如 url("images/bg.jpg"), url("../assets/pattern.png")。

    -   <gradient>: 使用 CSS 渐变作为背景。包括：

        -   linear-gradient(...): 线性渐变。
        -   radial-gradient(...): 径向渐变。
        -   repeating-linear-gradient(...): 重复线性渐变。
        -   repeating-radial-gradient(...): 重复径向渐变。
        -   conic-gradient(...): 锥形渐变。

    -   可以叠加多层背景，后写的在底层：background-image: url("logo.png"), linear-gradient(to right, red, blue);

-   **示例:** background-image: url("paper.gif");, background-image: linear-gradient(to bottom, #eee, #ccc);

3. background-repeat

-   **作用:** 控制背景图片如何重复平铺。可以为多层背景分别设置（逗号分隔）。

-   **值:**

    -   repeat: (默认值) 水平和垂直方向都重复。
    -   repeat-x: 仅水平方向重复。
    -   repeat-y: 仅垂直方向重复。
    -   no-repeat: 不重复，图片只显示一次。
    -   space: 在不裁剪图片的情况下，尽可能多地重复图片，并用空白均匀填充间隙。
    -   round: 在不产生空白间隙的情况下，尽可能多地重复图片，可能会拉伸或压缩图片以适应。

-   **示例:** background-repeat: no-repeat;, background-repeat: repeat-x;

4. background-position

-   **作用:** 设置背景图片的初始位置。可以为多层背景分别设置（逗号分隔）。位置是相对于 background-origin 定义的原点。

-   **值:** 可以是 1 或 2 个值。

    -   **关键字:** top, bottom, left, right, center。

        -   一个关键字：另一个默认为 center (如 top 等同于 top center)。
        -   两个关键字：第一个定义水平，第二个定义垂直 (顺序可交换，如 right top）。

    -   **长度值:** <length> (如 px, em)。指定相对于左上角的偏移。

    -   **百分比:** <percentage>。x% y% 表示图片上 x% y% 的点与容器内 x% y% 的点对齐。0% 0% 是左上角，100% 100% 是右下角，50% 50% 是中心。

    -   **组合:** 可以混合关键字、长度和百分比（如 top 20px, right 10%)。

    -   **四个值 (Edge offsets):** right 20px bottom 10px (从右边缘向左偏移 20px，从下边缘向上偏移 10px)。

-   **示例:** background-position: center center;, background-position: top right;, background-position: 20px 50%;

5. background-size

-   **作用:** 设置背景图片的尺寸。可以为多层背景分别设置（逗号分隔）。

-   **值:**

    -   auto: (默认值) 按图片的原始尺寸显示。
    -   cover: 缩放图片以完全覆盖背景区域，保持宽高比，图片可能被裁剪。
    -   contain: 缩放图片以使其完整地适应背景区域，保持宽高比，背景区域可能有空白。
    -   <length>: 设置具体的宽度，高度会按比例缩放 (如 200px)。
    -   <percentage>: 设置相对于背景区域的百分比宽度，高度按比例缩放 (如 50%)。
    -   <length> <length> 或 <percentage> <percentage>: 分别设置宽度和高度 (如 100px 80px, 80% 60%)。
    -   auto <length> 或 <length> auto: 指定一个维度，另一个按比例缩放。

-   **示例:** background-size: cover;, background-size: 50% auto;, background-size: 300px 200px;

6. background-attachment

-   **作用:** 设置背景图片是否随着页面的其余部分滚动。可以为多层背景分别设置（逗号分隔）。

-   **值:**

    -   scroll: (默认值) 背景图片随元素内容一起滚动。
    -   fixed: 背景图片相对于**视口 (viewport)** 固定，不随元素内容滚动。
    -   local: 背景图片随元素**内容**滚动。如果元素有滚动条，背景图片会跟着滚动。

-   **示例:** background-attachment: fixed; (常用于创建视差效果)

7. background-origin

-   **作用:** 指定 background-position 属性的原点位置（即背景图片的定位是相对于哪个框开始的）。可以为多层背景分别设置（逗号分隔）。

-   **值:**

    -   padding-box: (默认值) 背景相对于内边距框定位。
    -   border-box: 背景相对于边框框定位。
    -   content-box: 背景相对于内容框定位。

-   **示例:** background-origin: content-box;

8. background-clip

-   **作用:** 指定背景的绘制区域（背景颜色或图片应该延伸到哪个框）。

-   **值:**

    -   border-box: (默认值) 背景延伸到边框的外边缘。
    -   padding-box: 背景延伸到内边距的外边缘（不包括边框）。
    -   content-box: 背景仅延伸到内容框。
    -   text: (实验性，需浏览器支持和 -webkit- 前缀) 背景被裁剪成文字的前景色形状，常用于创建文字填充图片或渐变的效果。通常需要 color: transparent; 配合。

-   **示例:** background-clip: padding-box;, -webkit-background-clip: text; background-clip: text;

9. background-blend-mode

-   **作用:** 设置**多个背景层**（背景图片、渐变、背景颜色）相互之间的混合模式。可以为每对相邻层分别设置（逗号分隔）。

-   **值:**

    -   normal: (默认值) 顶层覆盖下层。
    -   multiply: 正片叠底。
    -   screen: 滤色。
    -   overlay: 叠加。
    -   darken: 变暗。
    -   lighten: 变亮。
    -   color-dodge: 颜色减淡。
    -   color-burn: 颜色加深。
    -   hard-light: 强光。
    -   soft-light: 柔光。
    -   difference: 差值。
    -   exclusion: 排除。
    -   hue: 色相。
    -   saturation: 饱和度。
    -   color: 颜色。
    -   luminosity: 亮度。

-   **示例:** background-image: url("texture.png"), linear-gradient(red, blue); background-blend-mode: overlay;

10. background (简写属性)

-   **作用:** 在一个声明中设置一个或多个背景属性。

-   **语法:** 可以包含以下属性的值，顺序不完全强制，但建议按此顺序，并且 background-position 和 background-size 之间必须用 / 分隔（如果两者都存在）。  
    [ <background-image> || <background-position> [ / <background-size> ]? || <background-repeat> || <background-attachment> || <background-origin> || <background-clip> || <background-color> ]

-   **重要:** 使用 background 简写时，任何未明确指定值的单个背景属性都会被重置为其**初始值**（例如，如果只写 background: blue;，则 background-image 会变为 none）。

-   **示例:**

    -   background: lightblue url("img.png") no-repeat center center / cover fixed;
    -   background: linear-gradient(red, blue);
    -   background: #eee;

二、颜色属性 (Color Properties)

主要指前景颜色，但也包括其他可以使用颜色值的属性。

color
- 作用: 设置元素的前景颜色，主要影响文本颜色，但也可能影响其他依赖前景色的属性（如边框颜色，如果未单独设置）。
- 值: : 任何有效的 CSS 颜色值。
- 示例: color: #333;, color: darkred;, color: hsla(120, 100%, 50%, 0.8);
opacity
- 作用: 设置整个元素的不透明度。值越小越透明。它会影响元素及其所有内容（包括背景、文本、边框）的透明度。
- 值: : 从 0.0 (完全透明) 到 1.0 (完全不透明)。
- 注意: opacity 会影响元素的堆叠上下文。它不同于使用 RGBA 或 HSLA 颜色值设置的透明度（后者只影响颜色本身，不影响子元素继承）。
- 示例: opacity: 0.7;

三、其他使用颜色值的常见属性

许多其他 CSS 属性也接受值来定义它们的颜色：

border-color, border-top-color, border-right-color, border-bottom-color, border-left-color: 设置边框颜色。
outline-color: 设置轮廓线颜色。
text-decoration-color: 设置文本装饰线（如下划线）的颜色。
text-shadow: 阴影颜色是其值的一部分。
box-shadow: 阴影颜色是其值的一部分。
caret-color: 设置输入框光标的颜色。
column-rule-color: 设置多列布局中列分隔线的颜色。
text-emphasis-color: 设置文本强调标记的颜色。
accent-color: 用于美化某些 UI 控件（如复选框、单选按钮）的强调色。

四、 CSS 颜色值类型

CSS 提供了多种方式来定义颜色：

颜色关键字 (Color Keywords):
- 预定义的颜色名称，如 red, blue, green, black, white, transparent, silver, gray, maroon, purple, fuchsia, lime, olive, yellow, navy, teal, aqua 等（共有 140 多个标准名称）。
十六进制颜色值 (Hexadecimal Colors):
- #RGB: 3 位十六进制 (如 #f00 代表红色)。
- #RRGGBB: 6 位十六进制 (如 #ff0000 代表红色)。
- #RGBA: 4 位十六进制，最后一位代表 Alpha 透明度 (如 #f008 代表半透明红色)。
- #RRGGBBAA: 8 位十六进制，最后两位代表 Alpha 透明度 (如 #ff000080 代表半透明红色)。
RGB / RGBA 颜色值:
- rgb(R, G, B): 使用 0-255 或 0%-100% 的值定义红、绿、蓝通道。如 rgb(255, 0, 0), rgb(100%, 0%, 0%)。
- rgba(R, G, B, A): 同上，但增加了 Alpha 透明度通道 (A: 0.0 到 1.0)。如 rgba(255, 0, 0, 0.5)。
HSL / HSLA 颜色值:
- hsl(H, S, L): 使用色相 (Hue: 0-360度)、饱和度 (Saturation: 0%-100%)、亮度 (Lightness: 0%-100%) 定义颜色。如 hsl(0, 100%, 50%) 代表红色。
- hsla(H, S, L, A): 同上，但增加了 Alpha 透明度通道。如 hsla(0, 100%, 50%, 0.5)。
特殊关键字:
- transparent: 完全透明。
- currentColor: 使用元素当前的 color 属性值。非常有用，例如可以让 SVG 图标的颜色跟随文本颜色变化。

案例 1

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 背景与颜色示例</title>
    <link rel="stylesheet" href="11.css">
</head>
<body style="min-height: 150vh;"> <!-- 添加足够高度以测试 background-attachment: fixed -->

    <h1>CSS 背景 (Background) 与颜色 (Color) 示例</h1>

    <!-- 示例 1: 基础颜色 -->
    <div class="container color-basic">
        <h2>基础颜色 (color & background-color)</h2>
        <p>这段文本使用自定义的前景色 (color)，容器有背景色 (background-color)。</p>
    </div>

    <!-- 示例 2: 背景图片与重复/定位/尺寸 -->
    <div class="container bg-image-basics">
        <h2>背景图片基础 (image, repeat, position, size)</h2>
        <p>容器使用背景图片，不重复，居中显示，并覆盖整个区域。</p>
    </div>

    <!-- 示例 3: 渐变背景 -->
    <div class="container bg-gradient">
        <h2>渐变背景 (linear-gradient & radial-gradient)</h2>
        <p class="linear">线性渐变背景</p>
        <p class="radial">径向渐变背景</p>
    </div>

    <!-- 示例 4: 多重背景 -->
    <div class="container bg-multiple">
        <h2>多重背景 (Multiple Backgrounds)</h2>
        <p>这里结合了一个图标和一层半透明渐变作为背景。</p>
    </div>

    <!-- 示例 5: 背景附着 (background-attachment) -->
    <div class="container bg-attachment">
        <h2>背景附着 (fixed vs scroll vs local)</h2>
        <p class="fixed">这个区域使用 `background-attachment: fixed;` 背景相对于视口固定，滚动页面看看效果。</p>
        <div class="scrollable-content">
            <p class="local">这个区域内部可以滚动，背景使用 `background-attachment: local;` 背景会随内容滚动。</p>
            <p style="height: 150px;">更多内容撑开滚动条...</p>
        </div>
        <p class="scroll-default">这个区域使用默认的 `background-attachment: scroll;` 背景随元素滚动。</p>
    </div>

    <!-- 示例 6: 背景原点与裁剪 (origin & clip) -->
    <div class="container bg-origin-clip">
        <h2>背景原点与裁剪 (origin & clip)</h2>
        <p class="origin-content-clip-padding">Origin: content-box, Clip: padding-box</p>
        <p class="clip-text-example">Text Clipping!</p>
    </div>

    <!-- 示例 7: 背景混合模式 (blend-mode) -->
    <div class="container bg-blend">
        <h2>背景混合模式 (background-blend-mode)</h2>
        <p>背景图片与背景色进行混合。</p>
    </div>

    <!-- 示例 8: 不透明度 (opacity) -->
    <div class="container opacity-example">
        <h2>不透明度 (opacity)</h2>
        <p>整个元素（包括文字和背景）都是半透明的。</p>
    </div>

     <!-- 示例 9: 不同颜色值表示法 -->
    <div class="container color-formats">
        <h2>不同颜色值表示法</h2>
        <p class="color-keyword">颜色关键字: mediumseagreen</p>
        <p class="color-hex">十六进制: #ff6347 (Tomato)</p>
        <p class="color-rgb">RGB: rgb(100, 149, 237) (CornflowerBlue)</p>
        <p class="color-rgba">RGBA (带透明度): rgba(255, 165, 0, 0.7) (Orange, 70% 不透明)</p>
        <p class="color-hsl">HSL: hsl(270, 60%, 70%) (Light Purple)</p>
        <p class="color-hsla">HSLA (带透明度): hsla(120, 100%, 25%, 0.5) (Dark Green, 50% 不透明)</p>
        <p class="color-current">使用 <span class="current-color-span">currentColor</span> 关键字 (颜色与父元素文本色一致)</p>
    </div>

    <!-- 示例 10: background 简写属性 -->
    <div class="container bg-shorthand">
        <h2>Background 简写属性</h2>
        <p>使用一行 CSS 设置多个背景属性。</p>
    </div>


</body>
</html>

    
/* 11.css */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  margin: 0; /* 移除默认 body margin */
  padding: 20px;
  background-color: #f4f7f6; /* 页面浅色背景 */
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}
h2 {
  color: steelblue;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-top: 0;
  margin-bottom: 15px;
}

.container {
  border: 1px solid #ccc;
  background-color: #fff; /* 容器默认白色背景 */
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

/* --- 示例 1: 基础颜色 --- */
.color-basic {
  background-color: lightyellow; /* 背景色 */
}
.color-basic p {
  color: darkred; /* 文本前景色 */
}

/* --- 示例 2: 背景图片基础 --- */
.bg-image-basics {
  /* 使用 picsum.photos 提供随机图片 */
  background-image: url('https://picsum.photos/id/1015/600/400');
  background-repeat: no-repeat; /* 不重复 */
  background-position: center center; /* 水平垂直居中 */
  background-size: cover; /* 覆盖整个区域 */
  height: 250px; /* 需要给容器一个高度才能看到背景图片 */
  color: white; /* 让文字在图片上更清晰 */
  text-shadow: 1px 1px 2px black; /* 给文字加阴影 */
}

/* --- 示例 3: 渐变背景 --- */
.bg-gradient p {
  padding: 15px;
  border-radius: 4px;
  color: white;
  text-align: center;
  margin-bottom: 10px;
}
.bg-gradient .linear {
  background-image: linear-gradient(to right, #007bff, #6610f2); /* 从左到右的线性渐变 */
}
.bg-gradient .radial {
  background-image: radial-gradient(circle, #ffc107, #fd7e14); /* 圆形径向渐变 */
}

/* --- 示例 4: 多重背景 --- */
.bg-multiple {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🎨</text></svg>'), /* 图标 (使用 SVG Data URI) */
                    linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)); /* 半透明白色渐变 */
  background-repeat: no-repeat, repeat; /* 图标不重复，渐变重复(虽然没必要) */
  background-position: top 10px right 10px, center; /* 图标在右上角，渐变在中间(虽然没必要) */
  background-size: 50px 50px, auto; /* 图标大小，渐变自动 */
  min-height: 150px;
}

/* --- 示例 5: 背景附着 --- */
.bg-attachment p {
  min-height: 200px; /* 确保有足够高度 */
  background-image: url('https://picsum.photos/id/10/400/300');
  background-size: cover;
  background-position: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid black;
}
.bg-attachment .fixed {
  background-attachment: fixed;
}
.bg-attachment .scrollable-content {
  height: 150px; /* 使这个 div 内部产生滚动条 */
  overflow: auto; /* 显示滚动条 */
  border: 2px solid orange;
}
.bg-attachment .local {
  min-height: 100px; /* 内部p标签也给个高度 */
  background-attachment: local;
  margin-bottom: 0; /* 移除底部边距 */
  border: 1px solid lime;
}
.bg-attachment .scroll-default {
  background-attachment: scroll; /* 默认行为 */
}


/* --- 示例 6: 背景原点与裁剪 --- */
.bg-origin-clip {
  border: 10px dashed steelblue; /* 醒目的边框 */
  padding: 30px; /* 较大的内边距 */
  height: 200px;
  background-image: url('https://picsum.photos/id/20/300/200');
  background-repeat: no-repeat;
  /* background-color: lightcoral; */ /* 加个背景色方便观察 */
}
.origin-content-clip-padding {
  margin-bottom: 20px;
  border: 2px solid red; /* 给p加个边框方便看 */
  background-origin: content-box; /* 定位相对于内容框 */
  background-clip: padding-box; /* 背景只绘制到内边距框 */
  background-position: top left; /* 让图片从内容区左上角开始 */
}
.clip-text-example {
  font-size: 4em;
  font-weight: bold;
  text-align: center;
  color: transparent; /* 文字颜色设为透明 */
  background-image: linear-gradient(to right, orange, deeppink);
  background-clip: text; /* 将背景裁剪为文字形状 */
  -webkit-background-clip: text; /* 兼容 Webkit 内核浏览器 */
}

/* --- 示例 7: 背景混合模式 --- */
.bg-blend {
  height: 200px;
  background-image: url('https://picsum.photos/id/40/500/300');
  background-color: teal; /* 背景色 */
  background-size: cover;
  background-position: center;
  background-blend-mode: luminosity; /* 使用亮度混合模式 */
  /* 试试看 multiply, screen, overlay, difference 等模式 */
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* --- 示例 8: 不透明度 --- */
.opacity-example {
  background-color: darkslateblue;
  color: white;
  opacity: 0.6; /* 整个元素半透明 */
}
.opacity-example p {
  color: white; /* 注意：p 的颜色虽然设为白色，但也会受父元素 opacity 影响 */
}

/* --- 示例 9: 不同颜色值表示法 --- */
.color-formats p { padding: 5px; margin-bottom: 5px; color: white; }
.color-keyword { background-color: mediumseagreen; }
.color-hex { background-color: #ff6347; }
.color-rgb { background-color: rgb(100, 149, 237); }
.color-rgba { background-color: rgba(255, 165, 0, 0.7); }
.color-hsl { background-color: hsl(270, 60%, 70%); }
.color-hsla { background-color: hsla(120, 100%, 25%, 0.5); }
.color-current {
  color: blue; /* 设置父元素的 color */
  border: 2px solid currentColor; /* 边框颜色使用父元素的 color 值 (蓝色) */
}
.color-current .current-color-span {
  color: green; /* span 自身的 color */
  outline: 1px solid currentColor; /* span 的轮廓线使用自身的 color 值 (绿色) */
}

/* --- 示例 10: background 简写属性 --- */
.bg-shorthand {
  /* 颜色 图片 重复 定位/尺寸 附着 */
  background: #e9ecef url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">💡</text></svg>') no-repeat top right / 40px auto scroll;
  min-height: 100px;
}

案例 2

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>背景与文字颜色示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .color-example {
      color: #ffffff; /* 设置字体颜色 */
      background-color: #2196f3; /* 设置背景颜色 */
      padding: 15px;
      margin-bottom: 20px;
    }

    .bg-image {
      background-image: url('https://picsum.photos/400/100'); /* 背景图片 */
      background-size: cover;      /* 填充满 */
      background-position: center; /* 居中显示 */
      color: white;
      padding: 20px;
      margin-bottom: 20px;
    }

    .bg-gradient {
      background: linear-gradient(45deg, #42a5f5, #7e57c2); /* 渐变背景 */
      color: white;
      padding: 20px;
      margin-bottom: 20px;
    }

    .multiple-backgrounds {
      background: 
        url('https://www.transparenttextures.com/patterns/black-linen.png'),
        linear-gradient(90deg, #ff9800, #f44336);
      color: white;
      padding: 20px;
      margin-bottom: 20px;
      background-blend-mode: overlay;
    }
  </style>
</head>
<body>

  <div class="color-example">纯色背景 + 白色文字</div>

  <div class="bg-image">背景图片填充 + 白色字体</div>

  <div class="bg-gradient">线性渐变背景 + 白色字体</div>

  <div class="multiple-backgrounds">组合背景（纹理图 + 渐变色）</div>

</body>
</html>

CSS 背景与颜色（Background & Colors） 6

1. background-color

2. background-image

3. background-repeat

4. background-position

5. background-size

6. background-attachment

7. background-origin

8. background-clip

9. background-blend-mode

10. background (简写属性)

二、 颜色属性 (Color Properties)

四、 CSS 颜色值类型

案例 1

案例 2

二、颜色属性 (Color Properties)