CSS3颜色格式和透明度
2015-12-07 14:36
519 查看
CSS3允许我们使用新方法如RGB或HSL来声明颜色。另外,我们还能在这两个方法后面追加一个透明通道(分别是RGBA和HSLA)。
HSL的H(hue)分量,代表的是人眼所能感知的颜色范围,这些颜色分布在一个平面的色相环上,取值范围是0°到360°的圆心角,每个角度可以代表一种颜色。在实际应用中,我们需要记住色相环上的六大主色,用作基本参照:360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红,它们在色相环上按照60°圆心角的间隔排列。
HSL的S(saturation)分量,指的是色彩的饱和度,它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大,颜色中的灰色越少,颜色越鲜艳,呈现一种从理性(灰度)到感性(纯色)的变化。
HSL的L(lightness)分量,指的是色彩的明度,作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小,色彩越暗,越接近于黑色;数值越大,色彩越亮,越接近于白色。
总之,记住针对色相环的这个顺口溜:Young Guys Can Be Messy Rascals。
Y = Yellow
G = Green
C = Cyan
B = Blue
M = Magenta
R = Red
These colors are spaced out at 60 degrees.
![](http://img.blog.csdn.net/20151207141237857)
为RGB和HSL颜色模式增加透明通道,能让我们快捷灵活地处理分层叠加元素。也就是说我们不用再依赖透明图片(如PNG或GIF图片)来实现这类视觉效果,这对制作响应式设计是个绝好的消息。
为什么不使用opacity?
CSS3还允许通过opacity声明来设置元素的透明度。但这种透明度与RGBA及HSLA有所不同,这种方式设置的透明度会对整个元素产生影响(元素的内容都会透明)。反之,使用RGBA或HSLA则可以仅让元素的某些部分有透明效果,这样,一个元素可以带有HSLA透明背景,但内部的文字仍然不透明。
1、HSL
HSL模式基于一个360°的色环相。HSL的H(hue)分量,代表的是人眼所能感知的颜色范围,这些颜色分布在一个平面的色相环上,取值范围是0°到360°的圆心角,每个角度可以代表一种颜色。在实际应用中,我们需要记住色相环上的六大主色,用作基本参照:360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红,它们在色相环上按照60°圆心角的间隔排列。
HSL的S(saturation)分量,指的是色彩的饱和度,它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大,颜色中的灰色越少,颜色越鲜艳,呈现一种从理性(灰度)到感性(纯色)的变化。
HSL的L(lightness)分量,指的是色彩的明度,作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小,色彩越暗,越接近于黑色;数值越大,色彩越亮,越接近于白色。
总之,记住针对色相环的这个顺口溜:Young Guys Can Be Messy Rascals。
Y = Yellow
G = Green
C = Cyan
B = Blue
M = Magenta
R = Red
These colors are spaced out at 60 degrees.
2、透明通道
HSL和RGB与十六进制颜色值最大的区别,是他们支持透明通道。//background-color:hsla(0,0%,100%,0.8); background-color:rgba(255,255,255,0.8);
为RGB和HSL颜色模式增加透明通道,能让我们快捷灵活地处理分层叠加元素。也就是说我们不用再依赖透明图片(如PNG或GIF图片)来实现这类视觉效果,这对制作响应式设计是个绝好的消息。
为什么不使用opacity?
CSS3还允许通过opacity声明来设置元素的透明度。但这种透明度与RGBA及HSLA有所不同,这种方式设置的透明度会对整个元素产生影响(元素的内容都会透明)。反之,使用RGBA或HSLA则可以仅让元素的某些部分有透明效果,这样,一个元素可以带有HSLA透明背景,但内部的文字仍然不透明。
相关文章推荐
- css基础
- [CSS3] opacity & alpha (rgba)
- 如何更改html文档中的element.css样式
- footer贴底的纯css实现方法
- css3动画效果
- css_1
- [CSS3] Background
- CSS常用选择器名
- [CSS3] 边框 Border
- CSS自定义滚动条样式
- 利用css做制作蜂窝布局
- 《CSS3秘籍》第3-5章
- css 入门基础知识
- 利用css3动画和border来实现圆形进度条
- css3-transition
- 经典CSS实现三角形图标原理解析
- 通过查看系统的ProgressBar样式来自定义旋转动画
- H5/CSS3/JS/DOM最全资源网
- 【HTML第一本】Head First HTML with CSS & XHTML读书笔记
- H5/CSS3/JS/DOM最全大全网