前端Wiki/CSS/基础/文字与颜色

颜色表示与透明度

CSS 表示颜色有四种主流写法：

关键字：red、teal，直观但数量有限、精度粗。
十六进制：#ff6600，六位是 RR GG BB，可缩写为三位 #f60；八位 #ff660080 最后两位是透明度。
rgb / rgba：rgb(255, 102, 0)，加第四个参数即透明度，如 rgba(0,0,0,.5)。
hsl / hsla：色相、饱和度、亮度，如 hsl(200, 80%, 50%)。调色时只改色相就能得到同风格的相邻色，非常适合配色。

控制整元素透明度用 opacity，取值 0~1。注意它与 rgba 的区别：opacity 让整个元素连同文字、子元素一起变透明；rgba 只影响声明的那一个颜色。做遮罩层常用 rgba 背景，避免内容跟着变淡。

本节要点常用 #hex、rgb/rgba、hsl 三种写法；hsl 调色相即可衍生同系色；opacity 整体透明（含子元素），rgba 只透明背景色。

CSS

<style>
  body { background: hsl(220, 20%, 92%); }
  .t1 { color: #f60; }               /* hex 缩写 */
  .t2 { color: rgb(0, 128, 0); }     /* rgb */
  .t3 { color: hsl(300, 70%, 40%); } /* hsl */
  .mask {
    background: rgba(0, 0, 0, .5);  /* 半透明背景 */
    color: #fff;                     /* 文字不受影响 */
    padding: 10px;
  }
  .ghost { opacity: .4; }            /* 整体半透明 */
</style>
<p class="t1">橙色</p><p class="t2">绿色</p><p class="t3">紫色</p>
<div class="mask">半透明遮罩上的文字</div>
<p class="ghost">整段都变淡了</p>

🔗 相关词条CSS 元素 justify-content align-items !important box-sizing

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读