CSS：CSS颜色与背景教程.pdf

CSS：：CSS颜色与背景教程颜色与背景教程

CSS颜色基础颜色基础

1.颜色表示方法颜色表示方法

在CSS中，颜色可以通过多种方式表示，包括十六进制颜色代码、RGB颜色、RGBA颜色、HSL

颜色、HSLA颜色以及颜色关键字。每种表示方法都有其特点和适用场景，下面将详细介绍这些

颜色表示方法。

1.1十六进制颜色代码十六进制颜色代码

十六进制颜色代码是一种常见的颜色表示方法，它使用六位十六进制数来表示红、绿、蓝三种颜

色的强度。格式为#RRGGBB，其中RR表示红色的强度，GG表示绿色的强度，BB表示蓝色的强

度。

示例示例

/*设置背景颜色为十六进制颜色代码*/

body{

background-color:#FFA500;/*橙色*/

}

1.2RGB颜色颜色

RGB颜色模型使用红、绿、蓝三种颜色的组合来表示颜色。在CSS中，RGB颜色使用rgb()函数

表示，每个颜色分量的值范围从0到255。

示例示例

/*设置背景颜色为RGB颜色*/

body{

background-color:rgb(255,165,0);/*橙色*/

}

1.3RGBA颜色颜色

RGBA颜色模型在RGB颜色模型的基础上增加了透明度（alpha）通道。透明度的值范围从0（完

全透明）到1（完全不透明）。

示例示例

/*设置背景颜色为RGBA颜色*/

body{

background-color:rgba(255,165,0,0.5);/*半透明橙色*/

}

1.4HSL颜色颜色

HSL颜色模型使用色调（Hue）、饱和度（Saturation）和亮度（Lightness）三个参数来表示颜

色。色调的值范围从0到360度，饱和度和亮度的值范围从0%到100%。

示例示例

/*设置背景颜色为HSL颜色*/

body{

background-color:hsl(39,100%,50%);/*橙色*/

}

1.5HSLA颜色颜色

HSLA颜色模型在HSL颜色模型的基础上增加了透明度（alpha）通道。

示例示例

/*设置背景颜色为HSLA颜色*/

body{

background-color:hsla(39,100%,50%,0.5);/*半透明橙色*/

}

1.6颜色关键字颜色关键字

CSS还支持使用颜色关键字来表示颜色，如red、blue、green等。这些关键字代表了预定义的

颜色值。

示例示例

/*设置背景颜色为颜色关键字*/

body{

background-color:orange;/*橙色*/

}

通过以上介绍，我们可以看到CSS提供了丰富的颜色表示方法，可以根据不同的需求和场景选择

合适的方式来设置颜色。

CSS背景属性详解背景属性详解

2.背景颜色背景颜色

2.1原理原理

背景颜色属性background-color用于设置元素的背景颜色。它可以接受各种颜色值，包括预

定义的颜色名、十六进制、RGB、RGBA、HSL、HSLA等。

2.2示例示例

/*使用预定义颜色*/

div{

background-color:red;

}

/*使用十六进制颜色*/

div{

background-color:#ff0000;

}

/*使用RGB颜色*/

div{

background-color:rgb(255,0,0);

}

/*使用RGBA颜色，添加透明度*/

div{

background-color:rgba(255,0,0,0.5);

}

/*使用HSL颜色*/

div{

background-color:hsl(0,100%,50%);

}

/*使用HSLA颜色，添加透明度*/

div{

background-color:hsla(0,100%,50%,0.5);

}

3.背景图像背景图像

3.1原理原理

background-image属性用于在元素的背景上显示图像。可以设置单个或多个图像，以及图像

的显示方式。

3.2示例示例

/*单个背景图像*/

div{

background-image:url(image.jpg);

}

/*多个背景图像*/

div{

backgro