css3新增颜色表示方式分享


Posted in HTML / CSS onApril 15, 2014

一、CSS1&2颜色表示方式(W3C标准)

1、Color name  颜色名称方式(用颜色关键字表示对应的颜色。)
例如:red(红色)、blue(蓝色)、pink(粉色)
优点:方便快捷而且特定颜色比较准确
缺点:
表示颜色数量有限。
不支持透明颜色.
 
2、HEX方式 十六进制方式(使用十六进制表示颜色)
语法:#RRGGBB 或 #RGB
取值:
RR: 红色值。十六进制正整数
GG: 绿色值。十六进制正整数
BB: 蓝色值。十六进制正整数
取值范围:00-FF
例如:#FF0000红色 #FFFF00 黄色。
优点:表示颜色种类多,使用较方便
缺点:
16进制单位换算很成问题
不支持透明颜色。
特定颜色需要工具配合或者一定的颜色调配知识
 
 
3、RGB方式 三原色配色方式
语法:RGB(R,G,B)
取值:
R: 红色值。正整数 | 百分数
G: 绿色值。正整数 | 百分数
B: 蓝色值。正整数 | 百分数
取值范围:0~255或者0%~100%
例如:rgb(255,0,0)红色 rgb(255,255,0)黄色
优点:表示颜色种类多,使用较方便
缺点:
不支持透明颜色
特定颜色需要工具配合或者一定的颜色调配知识
 
二、CSS3 新增颜色表示方式
1、RGBA模式
此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度。
语法:RGBA(R,G,B,A)
取值:
R: 红色值。正整数 | 百分数
G: 绿色值。正整数 | 百分数
B: 蓝色值。正整数 | 百分数
A: Alpha透明度。取值0~1之间。
例如:rgba(255,0,0,0.5)半透明红色

<style type="text/css">
body{background:rgba(255,0,0,1)}
div{width:300px;
height:300px;
background:rgba(0,0,255,0.4);
position:absolute;
top:0;
left:0;
}
</style>
<body>
猜猜我在哪里
<div></div>
</body>

2、HSL模式(色轮模式)
语法:HSL(H,S,L)
取值:
H: Hue(色调)。–0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S: Saturation(饱和度)。取值为:0.0% - 100.0%
L: Lightness(亮度)。取值为:0.0% - 100.0%
例如:hsl(360,50%,50%) 红色

css3新增颜色表示方式分享

复制代码
代码如下:

<style type="text/css">
body{background:rgba(0,0,255,0.5);}
div{width:300px;
height:300px;
background:hsl(140,50%,50%);
position:absolute;
top:0;
left:0;
}
</style>
<body>
<div></div>
</body>

3、HSLA模式

HTML / CSS 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 #HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 #HTML / CSS
css3发光搜索表单分享
Apr 11 #HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 #HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 #HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 #HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 #HTML / CSS
You might like
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
php实现加减法验证码代码
2014/02/14 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
python全局变量引用与修改过程解析
2020/01/07 Python
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
会计学专业学生的求职信范文
2014/01/27 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
中学生演讲稿
2014/04/26 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
大学推普周活动总结
2015/05/07 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
高中语文教学反思范文
2016/02/16 职场文书