深入理解CSS六种颜色模式

目录

[1]关键字[2]16进制[3]RGB模式[4]RGBA模式[5]HSL模式[6]HSLA模式

前面的话

  赏心悦目的颜色搭配让人感到舒服,修改元素颜色的功能让人趋之若鹜。但颜色规划不当,会让网站用户无所适从。颜色从<font color="">发展至今,保留了很多内容,也增加了新的内容,本文将介绍关于颜色模式的内容

颜色模式

  以前主要采用关键字、16进制和RGB这三种设置颜色的方式。CSS3出现后,增加了RGBA、HSL、HSLA这三种模式,极大地丰富了CSS颜色设置的方式

【1】关键字

  CSS颜色关键字包括命名颜色、transparent、currentColor属性值

命名颜色

  直接使用的名字的颜色值称为命名颜色

  CSS支持17种合法命名颜色(标准颜色):

aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal

  [注意]浏览器支持140种颜色

transparent

  color: transparent用来表示文本的颜色纯透明,可以近似认为是rgba(0,0,0,0)

  [注意]IE7-不支持color:transparent,但支持 list-style-type: none; list-style-image: none; line-height: 2;">currentColor

  currentColor顾名思义指当前颜色,准确来讲指当前的文字颜色

  [注意]IE8-不支持该属性值

【2】16进制

  16进制是设置颜色值的常用方式,将三个介于00-FF的十六进制数连接起来,若16进制的3组数各自成对,则可简写为3位

  #abcdef
  #aabbcc <=> #abc

<安全颜色>

  web安全颜色是指在256色计算机系统上总能避免抖动的颜色,表示为RGB值20%和51(相应的16进制值为33)的倍数。因此,采用16进制时,使用00\33\66\99\cc\ff认为是Web安全色,一共6*6*6=216种

【3】RGB模式

  通过组合不同的红色、绿色、蓝色分量创造出的颜色成为RGB模式的颜色。显示器是由一个个像素构成,利用电子束来表现色彩。像素把光的三原色:红色(R)、绿色(G)、蓝色(B)组合起来。每像素包含8位元色彩的信息量,有0-255的256个单元,其中0是完全无光状态,255是最亮状态

  rgb(x%,y%,z%)
  rgb(a,b,c)

  [注意]若数值小于最小值0,则默认调整为0;若数值大小最大值255,则默认调整为255

【4】RGBA模式(IE8-浏览器不支持)

  rgba模式是在RGB基础上增加了alpha通道,用来设置颜色的透明度,其中这个通道值的范围是0-1。0代表完全透明,1代表完全不透明

    rgba(r,g,b,a)

<IE滤镜>

  IE8-浏览器对新增的颜色模式并不支持,需要使用gradient滤镜。gradient滤镜的前两位表示Alpha透明度值(00-ff),其中00表示全透明,ff表示完全不透明。后六位代表的是RGB模式

  如果使用#A6DADC并且透明度为0.6的透明色(0.6*255=153,转换成16进制是99),用gradient滤镜表示为

filter:progid:DXImageTransform.Microsoft.gradient(enabled = ‘true‘,startColorstr="#99A6DADC",endColorstr="#99A6DADC")

  [注意]IE滤镜只能兼容背景色,而不能兼容前景色

【5】HSL模式(IE8-浏览器不支持)

  HSL模式是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互的叠加得到各式各样的颜色。HSL标准几乎可以包括人类视力所能感知的所有颜色

    hsl(h,s,l)

  h:色调(hue)可以为任意整数。0(或360或-360)表示红色,60表示黄色,120表示绿色,180表示青色,240表示蓝色,300表示洋红(当h值大于360时,实际的值等于该值模360后的值)

  s:饱和度(saturation),就是指颜色的深浅度和鲜艳程度。取0-100%范围的值,其中0表示灰度(没有该颜色),100%表示饱和度最高(颜色最鲜艳)

  l:亮度(lightness),取0-100%范围的值,其中0表示最暗(黑色),100%表示最亮(白色)

【6】HSLA模式(IE8-浏览器不支持)

  HSLA模式是HSL的扩展模式,在HSL的基础上增加一个透明通道alpha来设置透明度

    hsla(<length>,<percentage>,<percentage>,<opacity>)
时间: 2024-12-06 05:20:49

深入理解CSS六种颜色模式的相关文章

CSS学习(十五)-CSS颜色模式、CSS颜色透明度

一.理论: 1.CSS3颜色模式 a.RGBA颜色模式,在RGB基础上加了控制alpha透明度的参数 b.HSL颜色模式:色调 饱和度 亮度 c.HSLA颜色模式:A值取于0-1之间,值越大,透明度越低 2.RGBA/HSLA滤镜格式 a.需要用转换工具才能在ie8及以下版本中使用RGBA/HSLA颜色模式相同的透明度,需要将RGBA/HSLA中的透明值乘以255,然后将其转换成十六进制值 二.实践: 1. <!DOCTYPE html> <html lang="en"

理解CSS盒子模型

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式.那么内容就是盒子里装的东西:而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料:边框就是盒子本身了:至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定

深入理解CSS中的层叠上下文和层叠顺序(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时

深入理解CSS中的margin

1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法 margin与可视尺寸 1.1使用那个与没有设定width/height的普通block水平元素 2.2只适用于水平方向尺寸 <body style="background-color:#1a2b3c"> <div style=&quo

深入理解CSS中的层叠上下文和层叠顺序

零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了.例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的.那对于CSS世界中的元素而言,所谓的“冲突”指什

理解CSS前景色和透明度

前面的话 颜色的出现让网页不再只是黑白,运用好颜色设计,能让网页增色不少.一个网页给人们留下的第一印象实际上就是它的整体颜色.关于如何设置颜色,请移步CSS的6种颜色模式.实际上,颜色的应用主要分为前景色.背景色和透明三个部分.本文主要介绍前景色和透明度. color前景色 值: <color> | inherit 初始值: 用户代理特定的值 应用于: 所有元素 继承性: 有 [影响边框] 一般来说,前景是元素的文本,不过前景还包括元素周围的边框.有两种方式直接影响一个元素的前景色,可以使用c

CSS颜色混合模式

注意:只有使用最新版的谷歌浏览器.火狐浏览器,才能正确的显示本文中的演示. Photoshop里最没有用处的一种功能——但也有人说是使其超出竞争对手的一种功能——就是混合模式(blend mode).混合模式是指两个像素点叠落到一起,用不同的方法混合它们的颜色.比如,darken颜色混合模式,就是选择两个像素中颜色更深的一个输出.当将混合模式运用到整张图片上时,会产生让人惊讶的效果. 虽然并不是Adobe的Photoshop发明了混合模式,但它的实现效果是最真实的.可现在,你不需要使用Photo

深入理解css中的margin属性

转载自  http://www.cnblogs.com/zhuzhenwei918/p/6124263.html 深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些"坑"的,下面我会介绍margin的基本知识以及那些"坑".这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间

前段--尝试以新角度深入理解CSS盒模型(1)

CSS样式规则的学习是很繁琐和枯燥的,因为它不像物理.数学或者其他编程语言一样有一些基本概念.有一些基本公理或者规则,其他所有的表现都是概念在这些公里或者规则之下的逻辑游戏,CSS是有一些基本概念,但它没有说给你几条规则然后所有的表现都是在这些规则之下的任意自由组合,你要推测一个样式声明块的在页面中具体是怎样表现的,你几乎靠非常少逻辑推理去推测出来,绝大多数是你知道并记住了这种写法的声名块是具有怎样的表现的.之所以为这样也是因为样式的组合太繁琐组合情况特别多,像同样的概念margin在块级中的表