熟悉css/css3颜色属性
颜色属性无处不在。字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色。本文参考了一些资料简单总结下以备日后查阅。
css中颜色的定义方式:
- 十六进制色
- RGB & RGBA
- HSL & HSLA
- 颜色名
十六进制色
个人最喜欢的一种颜色表达方式。
十六进制颜色是这样规定的:#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 颜色名
总结
- 关于兼容:
- 十六进制色(所有浏览器兼容)
- RGB(所有浏览器兼容)
- RGBA(ie下用滤镜兼容)
- HSL(不兼容ie)
- HSLA(不兼容ie)
- 颜色名(所有浏览器兼容)
- 参考资料:
熟悉css/css3颜色属性的更多相关文章
- 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。
实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...
- jquery中css获取颜色属性
Jquery获取颜色的方法为: var color = $(元素).css("color"); alert(color); 可以看到color如这样的格式; 但是; 因为rgb(0 ...
- CSS3 颜色属性
关键字颜色 red 十六进制颜色 #FF0000 RGB颜色 rgb(255,0,0) 新增的颜色表示方法 RGBa: RGB代表光的三原色,Red.Green和Blue CSS3中可以增加一个值 ...
- 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)
大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...
- web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触
15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...
- CSS3 border-radius 属性和CSS outline 属性
CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...
- css颜色属性及设置颜色的地方
css颜色属性 在css中用color属性规定文本的颜色. 默认值是not specified 有继承性,在javascript中语法是object.style.color="#FF0000 ...
- 重温CSS:Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- CSS3基础(4)——CSS3 渲染属性
一. CSS3 计数器详解 CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...
随机推荐
- OSGI.NET 框架浅析
关于osgi.net ,想必大家也听说过,以下是自己在学习osgi.net 过程中整理出来的内容,供大家学习参与使用. 1. UIOSP 开放工厂框架架构 开放工厂所有插件基于OSGi.NET面向服 ...
- u盘安装CENTOS后,启动missing operating system ,只能用U盘才能启动系统
好久之前就想把家里闲置的那台老的不能再老的笔记本换成linux的,用来学习 从N久之前用光盘安装的时候发现光驱坏掉了之后就没有再装过,最近又想安装于是就试了U盘安装 U盘安装过程也很简单,只需要制作一 ...
- [.net程序员必看]微软新动向之Android和IOS应用 visual studio 2015 Cordova[原创]
自萨蒂亚·纳德拉(Satya Nadella)上任微软CEO以来,可谓是惊喜不断,仿佛让世界尤其是我们.net程序员心中又燃起了希望.先是免费提供 iOS 版和安卓版 Office:然后在 xbox ...
- C语言 时间函数的学习和总结
一直都是以简单的time_t t,time(&t),ctime(&t)来表示时间,后来要以时间为日志文件的名字时,就有点蒙逼了.学习一下. tm结构: struct tm { ...
- Jmeter之Bean shell使用(一)
一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法; BeanShell是一种松散类型的脚本语言(这点和JS类似); BeanS ...
- JAVA插入sql代码
插入数据 import java.sql.*; /** * @version 2012-02-22 * @author */ public class InsertDemo { public stat ...
- container的生命周期
Container启动过程主要经历三个阶段:资源本地化.启动并运行container.资源回收,其中,资源本地化指创建container工作目录,从HDFS下载运行container所需的各种资源(j ...
- MMORPG大型游戏设计与开发(客户端架构 part1 of vegine)
重写有些核心接口的时候,其实遇到了许多的问题,甚至一度的想过要放弃,但是最终还是坚持了下来.在客户端提供的这些接口中,可以清晰的看到客户端所依赖的各种模块的支持,以及各自之间的一些关联.下面只是介绍了 ...
- USACO八皇后
VIS 0 1 2分别竖线和两个对角线,参见对角线(x,y)的和 差关系表 #include<iostream> #include<cstdio> #include<al ...
- Unity StartCoroutine 和 yield return 深入研究
http://www.cnblogs.com/fly-100/p/3910515.html