网站制作学习网DIV+CSS→正文:css3.0学习 第三节 颜色
字体:

css3.0学习 第三节 颜色

DIV+CSS 2010/9/19 16:45:14  点击:不统计

<文章来源:www.forasp.cn网站制作学习>

1.HSL colors

语法:
<length>||<percentage>|||<percentage>

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

说明:
HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL既是代表色调,饱和度,亮度三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一转载%77%77%77请%2E%66%6F%72%61%73%70%2E%63%6E注明

兼容性:
Firefox3.0,Firefox3.5,chrome2.0,opera9.64,Safari4支持

代码示例:
<div style="background-color: hsl(240,100%,50%);color:white;">在Firefox的浏览器里能看到蓝色背景</div>

 

2.HSLA colors

语法:
<length>||<percentage>|||<percentage>||<opacity>

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

说明:
HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL既是代表色调,饱和度,亮度三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一,HSLA是在HSL的基础上增加一个透明度(A)的设置。转载%77%77%77请%2E%66%6F%72%61%73%70%2E%63%6E注明

兼容性:
Firefox3.0,Firefox3.5,chrome2.0,opera9.64,Safari4支持

代码示例:
<div style="background-color: hsla(0,100%,50%,0.2);">在Firefox的浏览器里能看到透明色背景</div>

 

3.opacity

语法:
<length>|inherit

取值:
<length>:由浮点数字和单位标识符组成的长度值,不可为负值,默认值为1
inherit:默认继承

说明:
由浮点数字和单位标识符组成的长度值,不可为负值,声明用来设置一个原色的透明度,opacity取值为1的元素是完全不透明的,反之,取值为0的元素是完全透明的,看不见的,1到0之间的任何值都表示该元素的透明程度转载%77%77%77请%2E%66%6F%72%61%73%70%2E%63%6E注明

兼容性:
Firefox3.0,Firefox3.5,chrome2.0,opera9.64,Safari4支持

代码示例:
<style>
img.opacity1 { opacity:0.25;}
img.opacity2 { opacity:0.50;}
img.opacity3 { opacity:0.75;}
</style>
<div><img src="foraspimg/forasp.gif" class="opacity1"alt="网站制作学习网" /></div>
<div><img src="foraspimg/forasp.gif" class="opacity2"alt="网站制作学习网" /></div>
<div><img src="foraspimg/forasp.gif" class="opacity3"alt="网站制作学习网" /></div>

 


4.RGBA colors

语法:
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之间,不可为负值。转载%77%77%77请%2E%66%6F%72%61%73%70%2E%63%6E注明

 

兼容性:
Firefox3.0,Firefox3.5,chrome2.0,opera9.64,Safari4支持

代码示例:
<div style="background-color: rgba(0,0,0,0.5);">在Firefox的浏览器里能看到alpha值为0.5的黑色背景</div>


<%77w%77%2Ef%6F%72p%73%70%2Ec%6E>

·上一篇:表格的高度设为屏幕的100% >>    ·下一篇:css3.0学习 文本 Text effects >>
推荐文章
最新文章