颜色和背景

你想让按钮显示特定的蓝色。你从设计文件中找到颜色，粘贴 #1b2130 到样式表中，它生效了，但你完全不知道这些字符是什么意思，也不知道如何调整这个色调让它稍微浅一点。CSS 中的颜色看起来像一堆神秘代码，直到你学会了底层的几个系统。一旦你能读懂颜色并将其绘制到背景上，页面的大部分视觉特征就掌握在你手中了。

命名颜色

CSS 让你用几种不同的方式写同一个颜色。最简单的是**关键词**：浏览器已经认识的普通英文名称。

css

.tag {
  color: rebeccapurple;      /* 一个命名颜色，无需代码 */
}

大约有 140 个这样的名称，用于快速工作很方便，但对于真正的设计来说远远不够。其他方式让你能描述任何颜色。十六进制代码是 # 后跟六个字符，rgb() 用数量混合红、绿和蓝。它们都指向精确的颜色；关键词只是常见颜色的快捷方式。

css

.tag {
  color: #1b2130;            /* 同样的深海军蓝，用十六进制代码写法 */
}

Juno命名颜色同一个颜色可以写成关键词如 rebeccapurple、十六进制代码如 #1b2130 或 rgb()。关键词速度快但只有大约 140 个，所以大多数真正的工作使用代码。现在不要尝试用眼睛读十六进制代码；在这个阶段复制精确值完全正常。

透明度

有时你想要一种颜色可以部分透视，所以无论在其后面的是什么都会显示一点。这是**透明度**，你用称为 alpha 的第四个值添加它：0 是完全透视，1 是完全不透明。

css

.overlay {
  background-color: rgb(27 33 48 / 0.5);   /* 海军蓝，但半透明 */
}

末尾的 / 0.5 意味着"半透明度"。还有一个叫 opacity 的属性，它一次性淡化整个元素，包括文本：

css

.faded {
  opacity: 0.5;              /* 淡化整个元素，不只是一个颜色 */
}

区别很重要：alpha 只影响那一个颜色，而 opacity 淡化元素的一切。

Juno透明度添加第四个值到颜色使其透视：0 是不可见，1 是不透明，/ 0.5 这样的东西是一半。那个 alpha 只接触一个颜色。单独的 opacity 属性淡化整个元素，包括文本，所以当你只想要更柔和的背景时选择 alpha。

背景颜色和图像

background-color 属性填充元素后面的区域，到其边框。你可以使用任何你能命名的颜色。

css

.hero {
  background-color: hsl(219 28% 15%);   /* 内容后面的纯海军蓝 */
}

你也可以用 background-image 在元素后面放一个图像，用 url(...) 指向文件：

css

.hero {
  background-image: url("mountains.jpg");
  background-size: cover;               /* 缩放图像以填充整个区域 */
}

background-size: cover 缩放图片使其完全填充盒子，裁剪任何溢出。它是你大多数时候想要的设置，这样就没有空隙。

Juno背景颜色和图像background-color 填充元素后的空间，background-image: url(...) 把图片放在那里。将图像与 background-size: cover 配对，使其填充整个盒子而不留下间隙。这个组合涵盖了你早期大多数会用到的东西。

渐变

**渐变**是从一个颜色平滑混合到另一个的过程。CSS 将其视为一种图像，所以它放在 background-image 中而不是 background-color。

css

.banner {
  background-image: linear-gradient(hsl(219 28% 15%), hsl(219 40% 35%));
}

那从顶部的第一个颜色混合到底部的第二个。你可以列出超过两个颜色，也可以改变方向：

css

.banner {
  background-image: linear-gradient(to right, hsl(340 80% 55%), hsl(30 90% 60%));
  /* 从左到右混合而不是从上到下 */
}

无需图像文件；浏览器为你绘制混合。

Juno渐变渐变是颜色之间的平滑混合，CSS 将其视为图像，所以它在 background-image 中。linear-gradient() 沿直线混合，默认从上到下，或添加 to right 改变方向。无需文件，浏览器自己绘制混合。

适应和保持可读的颜色

一个有用的关键词是 currentColor。它代表元素的文本颜色，所以边框或图标可以自动匹配文本：

css

.chip {
  color: hsl(219 28% 15%);
  border: 2px solid currentColor;   /* 边框匹配文本颜色 */
}

稍后改变文本颜色，边框自己跟随，无需第二次编辑。

还有一件事要记住：确保文本从背景中脱颖而出。深色文本在深色背景上难以阅读，淡灰色在白色上会让眼睛疲劳。目标是两者之间亮度的明确差异。

Juno适应和保持可读的颜色currentColor 是复制元素文本颜色的关键词，所以边框可以匹配文本，如果你稍后改变它就跟随它。除此之外，保持文本可读：确保它明显比其后的亮或暗。低对比度是页面难以阅读的最常见原因。

颜色和背景 ​

命名颜色 ​

透明度 ​

背景颜色和图像 ​

渐变 ​

适应和保持可读的颜色 ​

颜色和背景

命名颜色

透明度

背景颜色和图像

渐变

适应和保持可读的颜色