您尚未登录,无法添加相关文章。 - 登录

新用户?

哎呀,出了点小问题,您可以稍后重试!

未填写内容或格式不正确!

CSS3 RGBA colors使用参考指南

浏览:30246

相关技术文章博览

我要添加++

基础知识(取自腾讯ISD Webteam CSS3中文手册)

语法:

R:红色值。正整数 | 百分数

G:绿色值。正整数 | 百分数

B:蓝色值。正整数 | 百分数

A:透明度。取值0~1之间

取值:
<length>
Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;
<percentage>
Saturation(饱和度)。 取值为0%到100%之间的值;
<percentage>
Lightness(亮度)。 取值为0%到100%之间的值;
<opacity>
alpha(透明度)。 取值在0到1之间;
说明:

RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。

RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值。

兼容性:
类型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)IE6 (√)Firefox 3.0.10 (√)Chrome 2.0.x (√)Opera 9.64 (√)Safari 4
(×)IE7 (√)Firefox 3.5
(×)IE8
(√)IE9

代码与实例

CSS代码:
.rgba_colors{
    width:200px; 
    padding:30px 20px; 
    border:2px solid #a0b3d6; 
    background:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg) no-repeat center top;  
    color:white;
}
.rgba_colors .in{
    background-color:rgba(0,120,60,0.4);
}
                
HTML代码:
<div class="hsla_colors">
    <div class="in">看看这里的背景颜色是什么颜色?</div>
</div>
                
效果截图
CSS3 RGBA colors效果截图
查看demo原页面>>

拓展知识点(由各前端同仁提供)

尚未添加拓展知识点!我来添加++
图片地址是:取消
插入:

我要分享

分享到:1