CSS 颜色,可以用以下方法来规定 CSS 中的颜色

CSS 颜色,可以用以下方法来规定 CSS 中的颜色

CSS 颜色可以用以下方法来规定 CSS 中的颜色:十六进制色 、RGB 颜色 、RGBA 颜色

1.十六进制颜色

是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。举例说,#0000ff 值显示为蓝色,这是因为蓝色成分被设置为最高值(ff),而其他成分被设置为 0。

2.RGB 颜色

所有浏览器都支持 RGB 颜色值。RGB 颜色值是这样规定的:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。

举例说,rgb(0,0,255) 值显示为蓝色,这是因为 blue 参数被设置为最高值(255),而其他被设置为 0。同样地,下面的值定义了相同的颜色:rgb(0,0,255) 和 rgb(0%,0%,100%)。

3.RGBA 颜色

RGBA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

下列案例3-7所示,通过RGBA设置背景的不同透明值。

例3-7 example07.html

 

<!DOCTYPE  HTML>

 

<html>

 

<head>

 

<meta  http-equiv="Content-Type" content="text/html;  charset=utf-8">

 

<title></title>

 

<style  type="text/css">

 

/*定义单元样式的外观及文本样式*/

 

li.rgba {

 

    float: left; width: 100px; height: 80px;

 

    border: #CCC solid 1px;

 

    text-align: center;font-size: 12px;

 

}

 

/***********定义背景颜色效果***********开始***/

 

li.rgba1 { background:  rgba(255, 0, 0, 1); }

 

li.rgba2 { background:  rgba(255, 0, 0, 0.8); }

 

li.rgba4 { background:  rgba(255, 0, 0, 0.4); }

 

li.rgba6 { background:  rgba(255, 0, 0, 0); }

 

/***********定义背景颜色效果***********结束***/

 

</style>

 

</head>

 

<body>

 

<div>

 

    <p>CSS3的RGBA效果</p>

 

    <li class="rgba  rgba1">Alpha参数为1</li>

 

    <li class="rgba  rgba2">Alpha参数为0.8</li>

 

    <li class="rgba  rgba4">Alpha参数为0.4</li>

 

    <li class="rgba  rgba6">Alpha参数为0</li>

 

</div>

 

</body>

 

</html>

 

运行案例 3-7 ,由于背景虽然背景颜色设置一样,但是背景设置不同,显示的效果如图3-9所示。

CSS 颜色,可以用以下方法来规定 CSS 中的颜色

图3-9 背景设置不同的透明度显示的效果