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 相关文章推荐
CSS3教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
php生成图片验证码的方法
2016/04/15 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
php socket通信简单实现
2016/11/18 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
React组件中的this的具体使用
2018/02/28 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
详解supervisor使用教程
2017/11/21 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
DIY手工制作经营店创业计划书
2014/02/01 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
保送生自荐信范文
2015/03/26 职场文书
消防安全月活动总结
2015/05/08 职场文书
单位工资证明范本
2015/06/12 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS