颜色属性无处不在。字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色。本文参考了一些资料简单总结下以备日后查阅。

  css中颜色的定义方式:

  1. 十六进制色
  2. RGB & RGBA
  3. HSL & HSLA
  4. 颜色名

十六进制色

  个人最喜欢的一种颜色表达方式。

  十六进制颜色是这样规定的:#RRGGBB,其中的RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。

  生成随机颜色:

function getRandomColor() {
  return '#' + ('00000' + parseInt(Math.random() * 0xffffff).toString(16)).slice(-6);
}

  猛戳CSS 颜色十六进制值查看具体颜色效果。

RGB和RGBA

  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%)。

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

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

  可以直观感受下RGBA: RGBA颜色展示

  如果看不到控件效果,请用chrome打开~

HSL和HSLA

  HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度)- 表示颜色柱面坐标表示法。

  HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)。

  Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。可以看下面这张图感受下:

  Saturation 是百分比值;0%表示的是一个灰度,不使用任何的色彩,而100%是全彩,表示充分使用一个颜色。

  Lightness 同样是百分比值;0% 是黑色,100%是白色。

  可以直观感受下HSL(看不到效果请用chrome): HSL颜色展示

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

  HSLA 颜色值是这样规定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

  如果实际应用中我们需要让颜色变亮一点或者变暗一点,hsl是个不错的选择,比如说a:hover时颜色变亮,改变第三个参数值即可。

  利用hsl我们也能做一些动态的渐变效果,因为360颜色一循环。这个demo中的颜色就用了hsl(猛戳看demo

颜色名

  就是white、black、red等等这样的啦,其实还有更多,可以参考CSS 颜色名

总结

  • 关于兼容:
  1. 十六进制色(所有浏览器兼容)
  2. RGB(所有浏览器兼容)
  3. RGBA(ie下用滤镜兼容)
  4. HSL(不兼容ie)
  5. HSLA(不兼容ie)
  6. 颜色名(所有浏览器兼容)
  • 参考资料:
  1. CSS 合法颜色值
  2. CSS3 RGBA
  3. 玩转CSS3的颜色

熟悉css/css3颜色属性的更多相关文章

  1. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

  2. jquery中css获取颜色属性

    Jquery获取颜色的方法为: var color = $(元素).css("color"); alert(color); 可以看到color如这样的格式; 但是; 因为rgb(0 ...

  3. CSS3 颜色属性

    关键字颜色 red 十六进制颜色 #FF0000 RGB颜色   rgb(255,0,0) 新增的颜色表示方法 RGBa: RGB代表光的三原色,Red.Green和Blue CSS3中可以增加一个值 ...

  4. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  5. web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  6. CSS3 border-radius 属性和CSS outline 属性

    CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...

  7. css颜色属性及设置颜色的地方

    css颜色属性 在css中用color属性规定文本的颜色. 默认值是not specified 有继承性,在javascript中语法是object.style.color="#FF0000 ...

  8. 重温CSS:Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  9. CSS3基础(4)——CSS3 渲染属性

    一. CSS3 计数器详解    CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...

随机推荐

  1. OSGI.NET 框架浅析

    关于osgi.net ,想必大家也听说过,以下是自己在学习osgi.net 过程中整理出来的内容,供大家学习参与使用. 1.  UIOSP 开放工厂框架架构 开放工厂所有插件基于OSGi.NET面向服 ...

  2. u盘安装CENTOS后,启动missing operating system ,只能用U盘才能启动系统

    好久之前就想把家里闲置的那台老的不能再老的笔记本换成linux的,用来学习 从N久之前用光盘安装的时候发现光驱坏掉了之后就没有再装过,最近又想安装于是就试了U盘安装 U盘安装过程也很简单,只需要制作一 ...

  3. [.net程序员必看]微软新动向之Android和IOS应用 visual studio 2015 Cordova[原创]

    自萨蒂亚·纳德拉(Satya Nadella)上任微软CEO以来,可谓是惊喜不断,仿佛让世界尤其是我们.net程序员心中又燃起了希望.先是免费提供 iOS 版和安卓版 Office:然后在 xbox ...

  4. C语言 时间函数的学习和总结

    一直都是以简单的time_t t,time(&t),ctime(&t)来表示时间,后来要以时间为日志文件的名字时,就有点蒙逼了.学习一下.   tm结构: struct tm {   ...

  5. Jmeter之Bean shell使用(一)

    一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法; BeanShell是一种松散类型的脚本语言(这点和JS类似); BeanS ...

  6. JAVA插入sql代码

    插入数据 import java.sql.*; /** * @version 2012-02-22 * @author */ public class InsertDemo { public stat ...

  7. container的生命周期

    Container启动过程主要经历三个阶段:资源本地化.启动并运行container.资源回收,其中,资源本地化指创建container工作目录,从HDFS下载运行container所需的各种资源(j ...

  8. MMORPG大型游戏设计与开发(客户端架构 part1 of vegine)

    重写有些核心接口的时候,其实遇到了许多的问题,甚至一度的想过要放弃,但是最终还是坚持了下来.在客户端提供的这些接口中,可以清晰的看到客户端所依赖的各种模块的支持,以及各自之间的一些关联.下面只是介绍了 ...

  9. USACO八皇后

    VIS 0 1 2分别竖线和两个对角线,参见对角线(x,y)的和 差关系表 #include<iostream> #include<cstdio> #include<al ...

  10. Unity StartCoroutine 和 yield return 深入研究

    http://www.cnblogs.com/fly-100/p/3910515.html