14、CSS中颜色设置方法

html-css0170

14、CSS中颜色设置方法,第1张

在我们的显示屏中，一个像素点由三原色构成，分别为：红、绿、蓝。然而在计算机中使用0-255来表示某个原色的不同程度，在二进制中，可以使用八位二进制（00000000-11111111）进行表示。在十六进制中用（ 00-ff ）表示。那么红色（0-255），绿色（0-255），蓝色（0-255）三原色组成的颜色就有256*256*256种，组成了屏幕中五彩缤纷的画面。

由此就可以衍生出颜色的表示方式：

加入透明度：

使用色相表示（hsl）：

这是一种将所有颜色对应成一个圆，一个角度代表一种颜色，所以取值范围为0-360，但是它还包括了饱和度和亮度。

h:0-360,色相

s:0-100%，饱和度

l:0-100%，亮度

例如：hsl(0, 50%, 50%)

CSS中的字体颜色有两种表示方式，分别是：

1，颜色名,比如：color:white；

2，RGB，比如color:rgb(255,255,255)

3,16进制,比如color:#fff

除第一种表示很有限之外，后面两种可以改变不同的数值来表示不同的颜色。亲可以百度一下“颜色对照表”查看常用的颜色不同方式的表示方法。

1、如果想改变css背景图片，一般的做法只能使用css滤镜；

2、css滤镜主要包括：

Speia滤镜 灰度图滤镜 高斯模糊滤镜 反色滤镜 饱和度滤镜

对比度滤镜亮度滤镜色相旋转滤镜 阴影滤镜

3、css滤镜在浏览器兼容是比较坑爹的问题，ie浏览器有自己一套滤镜filter家族，基本所有ie内核浏览器都支持，ff和Chrome，opera则主要使用css3的滤镜，这些浏览器在后期版本支持css3的滤镜（目前版本基本都支持html5和css3），通过滤镜改变背景图的颜色和效果，当然这些滤镜主要是为了效果而产生，颜色只是固定的几种效果。

4、个别时候，css滤镜还需要结合js使用，才能到达必要效果，其实一般背景图片都是用透明度的css来设置它的颜色度；

透明度css列子：

transparent_class {

filter:alpha(opacity=50)

-moz-opacity:0.5

-khtml-opacity: 0.5

opacity: 0.5

}