css基础知识复习(8)之css的颜色

色彩斑斓的网页,少了颜色怎么可以。生活中的五颜六色,css一个都不会少。相对于语言来说,css表示同一种颜色的方式就有很多。今天咱们来盘点一下。

直接用英文关键词来表示。

这个就不详细说了,比如你想要一个红色的字体,那么直接像下面这样表示就是了。

看到了吧,多学习英文还是很有用的。至少在这儿css就难不住你。哈哈哈。

十六进制颜色表示法

个人表示这是我在写css的过程中用到的最多的方法之一。

十六进制颜色的表示方法如:,“#” 加后面六位十六进制的值。这个颜色一共有256个。

十六进制与rgb相对应。每两位表示rgb中的一位。比如红色red,在rgb中是(255, 0, 0), 那么它对应的十六进制则是 #ff0000 。它们两个正好可以互相转换。

所以当你知道一个颜色的rgb值或者十六进制值时,进行求出另一个只需要转换一下即可。

Rgb颜色表示方法。

上面咱们已经提到过rgb了现在详细讲一下。rgb就是所谓的三原色,红绿蓝,它们三个在一起,能够配出所有的颜色来,同时在计算机中,rgb三个值单独都在0-255之间。它的表示方法如下:

上面的示例中,139表示红,90表示绿,43表示蓝。有兴趣的同学可以把它转换成16进制的颜色代码。

Hsl颜色表示法

这种表示方法并不常用,一方面是不直观,另一方 main也是支持不好,一些老旧的浏览器不支持这种方法。

那么什么是hsl表示方法呢?

Hsl就是指色调,饱和度,明亮度。h是色调,在0-360之间,表示一个色轮的角度。s是饱和度,在0-100%之间。l是明亮度,也在0-100%之间。

透明度的表示方法

对于一个颜色的透明度,基于rgb和hsl,出现了对应的rgba和hsla两种表示方法。它们两个的括号中都会有四个值,前三个代表颜色,第四个代表透明度,取值范围在0-1之间,0表示完全透明,1表示完全不透明。如下

十六进制法没法在直接搞透明度,于是css有一个专门的属性来帮它实现透明,这个属性就是opcity,它的取值范围也在0到1之间。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181213G1LODR00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券