CSS3支持的颜色表示方法

简介: 本文介绍CSS3支持的颜色表示方法

色光三原色原理

色光的三原色是 红色(Red)绿色(Green)蓝色(Blue) 三种,可以构成缤纷的绚丽色彩。

实在不记得的话,这里左转百度百科

CSS3支持的颜色表示方法

  • 用颜色英文名称表示。英文名称代表一种颜色,但表示很有限且不易记忆和查询。
  • 十六进制的颜色表示。色光三原色原理,可以查表。
  • rgb (r, g, b) 表示。色光三原色原理,红色 + 绿色 + 蓝色。
  • hsl (Hue, Saturation, Lightness) 表示。色调 + 饱和度 + 亮度。
  • rgba (r, g, b, a) 表示。色光三原色原理,红色、绿色、蓝色 + 透明度。a ∈ [0, 1],0代表完全透明。
  • hsla (Hue, Saturation, Lightness, alpha) 表示。色调、饱和度、亮度 + 透明度。alpha ∈ [0, 1],0代表完全透明。

测试网页源码

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" ;charset="utf-8">
    <title>CSS颜色表示</title>
    <style type="text/css">
      div>div{
        width: 400px;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      for (var i = 0; i < 300; i++) {
        document.write("CSS颜色表示");
      }
    </script>
    <div style="position:absolute;top:0px">
      <div style="background-color:gray;">
        background-color:gray
      </div>
      <div style="background-color:#ff4314;">
        background-color:#888
      </div>
      <div style="background-color:#ffff00;">
        background-color:#ffff00
      </div>
      <div style="background-color:rgb(0, 255, 255);">
        background-color:rgb(0, 255, 255)
      </div>
      <div style="background-color:hsl(120, 100%, 50%);">
        background-color:hsl(120, 100%, 50%)
      </div>
      <div style="background-color:rgba(0, 255, 255, 0.5);">
        background-color:rgba(0, 255, 255, 0.5)
      </div>
      <div style="background-color:hsla(120, 100%, 50%, 0.5);">
        background-color:hsla(120, 100%, 50%, 0.5)
      </div>
    </div>
  </body>
</html>

效果:

image.png

相关文章
|
1月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
5天前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
8天前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
27 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
28天前
|
前端开发 容器
CSS 中几种常用的换行方法
CSS 中几种常用的换行方法
20 1
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
13 2
|
2月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
19 3
|
24天前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
20 0
|
1月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
|
2月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
14 1