CSS3学习笔记:利用RGBA或HSLA实现半透明背景

以往要实现半透明效果,一般都会使用半透明的PNG图片,若要兼容IE6,可能还需要加载一个脚本。但这种方法显然不够简洁优雅,而且使用起来不够灵活:在改变对象大小时,半透明图片得重制。使用CSS3实现半透明背景则简单很多:CSS3的色彩模式可以指定透明度,因此只需在background-color指定一个带有透明度的颜色,即可实现半透明背景。

1.CSS3的RGBA和HSLA色彩模式

RGBA指的是“红色、绿色、蓝色和Alpha透明度”,HSLA指的是“色调、饱和度、亮度和Alpha透明度”,使用这两种模式都可以定义半透明的颜色。我们可以使用基于浏览器的取色器来获取HSL或RGB值的颜色代码,比如Firefox扩展Rainbow、Chrome扩展Eye Dropper

2.RGBA与HSLA的选择

虽然目前RGBA是主流,但我推荐使用HSLA色彩模式。碰到一个RGBA值,你很难一眼看出它代表什么颜色。如果要对RGBA颜色值进行调整,比如变浓或变浅一点,你无法通过增减其中一个数字来达到目的。而使用HSLA值,只需要将色调设为一个特定值,若希望调整浓淡就调整饱和度,若希望调整明暗则调整亮度。

HSLA中的色调值有一定的规律:

0或360=红色

30=橙色

60=黄色

120=绿色

180=青色

240=蓝色

270=紫色

300=紫红色

亮度为0%,则是黑色;亮度为100%,则是白色。将饱和度设为0%,则亮度值控制着灰色的明暗程度。

HSLA的缺点是,书写时,饱和度和亮度的数值后面必须加百分号。

目前各浏览器除了IE9以下版本外,均支持RGBA和HSLA色彩模式

3.制作半透明的气泡对话框

border-radius-02

我们看回之前的例子:利用border-radius实现圆角效果,现在我们给它实现半透明背景,十分简单,只需要在background-color属性加上HSLA或RGBA的颜色值。

blockquote {
margin: 0 0 0 112px;
padding: 10px 15px 5px 15px;
border-top: 1px solid #fff;
background-color:hsla(182,44%,76%,.5);
word-wrap:break-word;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
behavior: url(PIE.htc);
}

这里写的“.5”是“0.5”的缩写。完成后的效果如图:

css3-transparent-background

4.针对IE的兼容方案

IE8及之前的浏览器不支持HSLA/RGBA,有以下几种备选方案。

  • 为旧浏览器指定不透明背景,并放置在HSLA/RGBA样式之前,则旧浏览器会忽略HSLA/RGBA的定义,使用不透明版本。不过,这样做的话必须使用background的简略写法,而不能使用background-color。另外,IE6/7不支持HSL,因此最好还是采用RGB或16进制色彩模式。因此,对上面的代码,我们可以这样写:
    background:#A6DADC;
    background:hsla(182,44%,76%,.5);

  • 使用半透明PNG图片。
  • 使用Gradient(渐变)滤镜。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>