RGB 和 HSL 颜色模式增加透明通道

发布日期:2015-08-26 18:33:57
为什么我们不继续沿用已被使用多年的可靠的十六进制颜色值,非要自找麻烦地使用
HSL 或 RGB?有这样的疑惑很正常。HSL 和 RGB 与十六进制颜色值最大的区别,是它
们支持透明通道。这意味着可以让元素透明,使其下方的元素可见。
我们来对 And the winner isn’t...网站做点修改以说明透明效果。首先,我们给 body 元素
设置一个很烂的背景图,如下:
body {
background: url(../img/grunge.jpg) repeat;
}
然后,我们给 #wrapper div(它包裹所有其他页面元素)添加一个白色的背景。不过此
处我们不会使用十六进制的白色,而是使用 HSLA 颜色值,具体如下面代码片段中加粗
的代码行所示:
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* 最外层的 DIV */
max-width: 1414px;
background-color: hsla(0, 0%, 100%, 0.8);
}
HSLA颜色声明与标准的HSL规则类似。 不过颜色必须得声明为 hsla 模式 (而不是 hsl ) ,
增加一个额外的透明度值,该值的格式是一个介于 0(全透明)到 1(不透明)之间的

小数。上面代码中我们将白色的 #wrapper 设置为半透明。

RGBA的语法和 HSLA的基本一样,即在颜色值后追加一个透明度值:
background-color: rgba(255, 255, 255, 0.8);
希望你已经看出,为 RGB 和 HSL 颜色模式增加透明通道,能让我们快捷灵活地处理分
层叠加元素。也就是说我们不用再依赖透明图片(如 PNG或 GIF图片)来实现这类视觉
效果,这对制作响应式设计是个绝好的消息。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计