知识库

Appearance

Return to top
On this page

CSS 颜色与背景

CSS 颜色和背景属性用于设置元素的视觉外观。

概述

颜色和背景是CSS中最基本也是最重要的视觉样式属性。

颜色表示方法

颜色关键字

使用预定义的颜色名称：

css
.element {
  color: red;
  color: blue;
  color: lightblue;
  color: transparent; /* 透明 */
}

十六进制值

使用 #RRGGBB 格式：

css
.element {
  color: #ff0000; /* 红色 */
  color: #f00; /* 简写形式 */
  color: #ff000080; /* 包含 alpha 通道的 8 位十六进制 */
}

RGB 值

使用 rgb() 函数：

css
.element {
  color: rgb(255, 0, 0); /* 红色 */
  color: rgb(100%, 0%, 0%); /* 百分比形式 */
  color: rgba(255, 0, 0, 0.5); /* 带透明度 */
}

HSL 值

使用 hsl() 函数：

css
.element {
  color: hsl(0, 100%, 50%); /* 红色：色相0，饱和度100%，亮度50% */
  color: hsla(0, 100%, 50%, 0.5); /* 带透明度 */
}

系统颜色

使用系统界面颜色：

css
.element {
  color: ButtonText;
  background-color: ButtonFace;
}

背景属性

background-color

设置背景颜色：

css
.element {
  background-color: #f0f0f0;
  background-color: rgba(0, 0, 0, 0.1);
  background-color: transparent; /* 默认值 */
}

background-image

设置背景图像：

css
.element {
  background-image: url('image.jpg');
  background-image: linear-gradient(to right, #ff0000, #0000ff);
  background-image: radial-gradient(circle, #ff0000, #0000ff);
}

background-repeat

控制背景图像重复：

css
.element {
  background-repeat: repeat; /* 默认值，水平和垂直都重复 */
  background-repeat: repeat-x; /* 仅水平重复 */
  background-repeat: repeat-y; /* 仅垂直重复 */
  background-repeat: no-repeat; /* 不重复 */
}

background-position

设置背景图像位置：

css
.element {
  background-position: left top;
  background-position: center center;
  background-position: right bottom;
  background-position: 10px 20px; /* 精确位置 */
  background-position: 50% 50%; /* 百分比 */
}

background-size

设置背景图像大小：

css
.element {
  background-size: cover; /* 完全覆盖容器，可能裁剪 */
  background-size: contain; /* 完整显示图像，可能留白 */
  background-size: 100px 200px; /* 固定尺寸 */
  background-size: 100% 100%; /* 拉伸填满 */
}

background-attachment

控制背景滚动行为：

css
.element {
  background-attachment: scroll; /* 默认值，随内容滚动 */
  background-attachment: fixed; /* 相对视口固定 */
  background-attachment: local; /* 相对元素内容滚动 */
}

background 简写属性

css
.element {
  background: #f0f0f0 url('image.jpg') no-repeat center center / cover fixed;
  /* color image repeat position / size attachment */
}

渐变

线性渐变

css
.linear-gradient {
  background: linear-gradient(to right, #ff0000, #0000ff);
  background: linear-gradient(45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%);
  background: linear-gradient(to bottom right, red, yellow, blue);
}

径向渐变

css
.radial-gradient {
  background: radial-gradient(circle, #ff0000, #0000ff);
  background: radial-gradient(ellipse at center, #ff0000 0%, #0000ff 100%);
  background: radial-gradient(circle at 10% 20%, #ff0000 0%, #0000ff 90%);
}

重复渐变

css
.repeating-gradient {
  background: repeating-linear-gradient(45deg, #ff0000, #ff0000 10px, #0000ff 10px, #0000ff 20px);
  background: repeating-radial-gradient(circle, #ff0000, #ff0000 10px, #0000ff 10px, #0000ff 20px);
}

现代颜色特性

CSS 自定义属性 (CSS 变量)

css
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

.element {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

现代颜色函数

css
.element {
  color: color(display-p3 0.5 0.5 0.5); /* P3 色彩空间 */
  color: lab(50% 40 -30); /* LAB 颜色空间 */
  color: lch(50% 50 45); /* LCH 颜色空间 */
}

颜色对比度

使用 contrast() 函数：

css
.element {
  background: #333;
  color: white;
  /* 通过增加背景对比度来提高可访问性 */
}

实用技巧

渐变边框

css
.gradient-border {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, 
              linear-gradient(to right, #ff0000, #0000ff) border-box;
  border-radius: 10px;
}

多重背景

css
.multiple-backgrounds {
  background-image: url('overlay.png'), url('background.jpg');
  background-repeat: no-repeat, repeat;
  background-position: center, top left;
}

背景裁剪

css
.background-clip {
  background: linear-gradient(to right, #ff0000, #0000ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

可访问性考虑

颜色对比度

确保文本与背景之间有足够的对比度：

css
.accessible-text {
  color: #000; /* 深色文本 */
  background-color: #fff; /* 浅色背景 */
  /* 或使用工具检查对比度比率至少为 4.5:1 */
}

避免仅通过颜色传达信息

css
.status {
  background-color: #dc3545; /* 红色 */
  border-left: 5px solid #dc3545;
}
.status::before {
  content: "错误: ";
  font-weight: bold;
}

最佳实践

  • 使用语义化的颜色变量名
  • 确保良好的颜色对比度以提高可访问性
  • 考虑用户偏好（如深色模式）
  • 合理使用透明度
  • 优化背景图像的性能
  • 考虑在不同设备上的显示效果