颜色与背景

掌握CSS颜色表示方法和背景属性

全站首页 频道首页

颜色表示方法

CSS提供了多种表示颜色的方法，每种方法都有其适用场景和优势。

1. 颜色名称

使用预定义的颜色名称：

CSS 
p {
    color: red;
    background-color: blue;
}

2. 十六进制颜色

使用十六进制值表示颜色：

CSS 
p {
    color: #ff0000; /* 红色 */
    background-color: #0000ff; /* 蓝色 */
    border-color: #00ff00; /* 绿色 */
}

3. RGB和RGBA

使用红绿蓝分量表示颜色，RGBA包含透明度：

CSS 
p {
    color: rgb(255, 0, 0); /* 红色 */
    background-color: rgba(0, 0, 255, 0.5); /* 半透明蓝色 */
}

4. HSL和HSLA

使用色相、饱和度、亮度表示颜色，HSLA包含透明度：

CSS 
p {
    color: hsl(0, 100%, 50%); /* 红色 */
    background-color: hsla(240, 100%, 50%, 0.5); /* 半透明蓝色 */
}

5. 颜色函数

CSS Color Module Level 4引入了新的颜色函数：

CSS 
p {
    color: oklch(70% 0.15 240); /* OKLCH颜色空间 */
    background-color: color(display-p3 1 0 0); /* P3广色域 */
}

背景属性

1. background-color

设置元素的背景颜色：

CSS 
div {
    background-color: #f0f0f0;
}

2. background-image

设置元素的背景图像：

CSS 
div {
    background-image: url('image.jpg');
}

3. background-repeat

设置背景图像的重复方式：

CSS 
div {
    background-repeat: no-repeat;
    /* 其他值：repeat, repeat-x, repeat-y, space, round */
}

4. background-position

设置背景图像的位置：

CSS 
div {
    background-position: center center;
    /* 其他值：top left, bottom right, 50% 50%, 20px 30px */
}

5. background-size

设置背景图像的尺寸：

CSS 
div {
    background-size: cover;
    /* 其他值：contain, 100% 100%, 200px 150px, auto */
}

6. background-attachment

设置背景图像的附着方式：

CSS 
div {
    background-attachment: fixed;
    /* 其他值：scroll, local */
}

7. background-origin

设置背景图像的定位区域：

CSS 
div {
    background-origin: content-box;
    /* 其他值：padding-box, border-box */
}

8. background-clip

设置背景的绘制区域：

CSS 
div {
    background-clip: content-box;
    /* 其他值：padding-box, border-box, text */
}

9. background-blend-mode

设置背景图像与背景颜色的混合模式：

CSS 
div {
    background-blend-mode: multiply;
    /* 其他值：screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity */
}

渐变背景

CSS支持创建线性渐变、径向渐变和锥形渐变背景。

1. 线性渐变

CSS 
div {
    background: linear-gradient(to right, red, yellow);
    /* 其他方向：to left, to top, to bottom, 45deg, 90deg */
}

2. 径向渐变

CSS 
div {
    background: radial-gradient(circle, red, yellow);
    /* 其他形状：ellipse, circle at 20% 50% */
}

3. 锥形渐变

CSS 
div {
    background: conic-gradient(red, yellow, green, blue, red);
}

4. 重复渐变

CSS 
div {
    background: repeating-linear-gradient(45deg, red, red 10px, yellow 10px, yellow 20px);
}

多重背景

CSS支持为元素设置多个背景，用逗号分隔：

CSS 
div {
    background: 
        linear-gradient(rgba(255,0,0,0.5), rgba(255,0,0,0.5)),
        url('pattern.png'),
        #f0f0f0;
}

背景简写属性

使用background简写属性可以同时设置多个背景属性：

CSS 
div {
    background: #f0f0f0 url('image.jpg') no-repeat center center / cover;
}

顺序为：background-color background-image background-repeat background-attachment background-position / background-size

系统颜色

CSS提供了访问系统颜色的能力：

CSS 
div {
    background-color: Canvas;
    color: CanvasText;
    /* 其他系统颜色：ButtonFace, ButtonText, Field, LinkText, VisitedText, etc. */
}

颜色混合

CSS Color Module Level 5引入了颜色混合功能：

CSS 
div {
    background-color: color-mix(in srgb, red 30%, blue 70%);
}

颜色与背景交互演示

基础设置

背景属性

背景演示标题

这是一段演示文本，用于测试背景颜色、渐变或图片的效果。您可以调整左侧的控制选项来实时查看变化。

当前背景类型：纯色

CSS代码

CSS 
background-color: #f0f0f0;

可访问性检查

对比度: 计算中...

建议: -

颜色信息

HEX: #f0f0f0

RGB: rgb(240, 240, 240)

HSL: hsl(0, 0%, 94%)

色彩理论与最佳实践

色彩对比度

确保文本与背景有足够的对比度，满足WCAG指南：

  • AA级：正常文本4.5:1，大文本3:1
  • AAA级：正常文本7:1，大文本4.5:1

色彩无障碍性

考虑色盲用户的需求：

  • 不要仅靠颜色传达信息
  • 使用图案、纹理或文字作为补充
  • 测试网站在灰度模式下的可读性

暗色模式支持

CSS 
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #e0e0e0;
    }
}

色彩心理学

了解色彩对用户心理的影响：

  • 红色：激情、能量、危险
  • 蓝色：信任、冷静、专业
  • 绿色：自然、健康、成功
  • 黄色：乐观、温暖、警告
  • 紫色：奢华、创意、神秘

CSS颜色函数

颜色调整函数

CSS 
div {
    color: hsl(210 100% 50%); /* 现代HSL语法 */
    background-color: hsl(from var(--primary) h s calc(l - 10%)); /* 相对颜色语法 */
}
上一课：文本与字体 下一课：响应式设计