CSS3中各种颜色属性的使用教程


Posted in HTML / CSS onMay 17, 2016

rgba 颜色
原本 CSS 中的颜色除了可用 16 进位来表示 RGB 颜色值之外,还可以使用预先定义好的颜色名称。而 RGBA 是以 RGB 为基础再加上不透明度的属性。

CSS Code复制内容到剪贴板
  1. rgba(redgreenblue, opacity)  

其中的 red、green 及 blue 等颜色值是用 10 进位或是百分比(%)的方式来表示,允许的值为 0 到 255 之间的整数值;而 opacity 不透明度允许的值为 0 到 1 之间带有小数的数值。

快速的看一下实际的范例:

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.  <div class="rgba1">rgba(0, 0, 0, 1)</div>  
  3.  <div class="rgba2">rgba(100%, 100%, 0%, 0.75)</div>  
  4.  <div class="rgba3">rgba(144, 180, 60, 1)</div>  
  5.  <div class="rgba4">rgba(204, 102, 102)</div>  
  6.  <div class="rgba5">rgba(300, -102, 0, 1)</div>  
  7.     
  8.  <div id="log"></div>  
  9. </body>  

接着换 CSS:

CSS Code复制内容到剪贴板
  1. div {   
  2.  width220px;   
  3.  height50px;   
  4.  floatleft;   
  5.  margin-right10px;   
  6.  line-height50px;   
  7.  text-aligncenter;   
  8.  border1px solid #000;   
  9. }  

基本用法:

CSS Code复制内容到剪贴板
  1. .rgba1 {   
  2.  /* 等同于 #ffffff 或是 rgba(100%, 100%, 100%, 1) */  
  3.  color: rgba(255, 255, 255, 1);   
  4.  /* 等同于 #000000 或是 rgba(0%, 0%, 0%, 1) */  
  5.  background-color: rgba(0, 0, 0, 1);   
  6. }   
  7.     
  8. .rgba3 {   
  9.  background-color: rgba(144, 180, 60, 1);   
  10. }  

CSS3中各种颜色属性的使用教程

除了给实际的颜色值之外,也可以用百分比(%)来表示:

CSS Code复制内容到剪贴板
  1. .rgba2 {   
  2.  background-color: rgba(100%, 100%, 0%, 0.75);   
  3. }  

CSS3中各种颜色属性的使用教程

若是 opacity 值没给的话,预设会用 0;这样表示是透明(transparent)喔:

CSS Code复制内容到剪贴板
  1. .rgba4 {   
  2.  /* 没有指定 opacity 值时, 预设使用 0 */  
  3.  background-color: rgba(204, 102, 102);   
  4. }  

CSS3中各种颜色属性的使用教程

如果颜色值超出限定的范围时,则会用最接近的数值:

CSS Code复制内容到剪贴板
  1. .rgba5 {   
  2.  /* 超出范围, 所以变成最接近的 rgba(255, 0, 0, 1) */  
  3.  background-color: rgba(300, -102, 0, 1);   
  4. }  

CSS3中各种颜色属性的使用教程

只要是颜色值的部份都能使用 rgab() 来设定。但当要用程序来存取时,可能要注意一下各浏览器间的差异喔:

JavaScript Code复制内容到剪贴板
  1. $(function(){   
  2.  var str = '';   
  3.  $('div:not(#log)').each(function(){   
  4.   var $this = $(this);   
  5.   str += '.' + $this.attr('class') + ' : ' + $this.css('background-color') + '<br />';   
  6.  });   
  7.  $('#log').html(str);   
  8. });  

hsl 及 hsla 颜色
在 CSS3 中新增了 HSL 及 HSLA 等两种跟颜色有关的属性。其中 H 为 hue(色相)、S 为 saturation(饱合度)、L 为 lightness(亮度)。HSLA 就跟 RGBA 一样,都是在原本的属性中多加入了不透明度的设定而已。

CSS Code复制内容到剪贴板
  1. hsl(hue, saturation, lightness);   
  2.     
  3. hsla(hue, saturation, lightness, opacity);  

hue 为整数的角度值,基本上是从 0 到 360 之间,因为它是经过一个简单的计算来处理所输入的值:

CSS Code复制内容到剪贴板
  1. (((x mod 360) + 360) mod 360)  

所以就算设定是 -10 的话,经过计算后它也会变换成 350。而 0 或 360 表示红色;60 表示黄色;120 表示绿色;240 表示蓝色。

saturation 的表示方式为百分比(%);100% 就是最大饱合度,而 0% 则为灰色调。lightness 的表示方式也一样是百分比(%);以 50% 为正常亮度为分界,百分比越高则会越接近白色(100%),而百分比越低则会越接近黑色(0%)。而 opacity 透明度允许的值为 0 到 1 之间带有小数的数值。

一样来看个简单的范例:

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.  <div class="hsl1">hsl(0, 50%, 50%)</div>  
  3.  <div class="hsl2">hsl(240, 80%, 50%)</div>  
  4.  <div class="hsl3">hsl(30, 100%, 50%)</div>  
  5.  <div class="hsla1">hsla(0, 100%, 0%, 0.8)</div>  
  6.  <div class="hsla2">hsla(210, 100%, 50%, 0.8)</div>  
  7.     
  8.  <div id="log"></div>  
  9. </body>  

来看看 CSS 的用法:

CSS Code复制内容到剪贴板
  1. div {   
  2.  width220px;   
  3.  height50px;   
  4.  floatleft;   
  5.  margin-right10px;   
  6.  line-height50px;   
  7.  text-aligncenter;   
  8.  border1px solid #000;   
  9. }   
  10. .hsl1 {   
  11.  color: hsl(0, 100%, 100%);   
  12.  background-color: hsl(0, 100%, 50%);   
  13. }   
  14. .hsl2 {   
  15.  color: hsl(0, 100%, 100%);   
  16.  background-color: hsl(240, 50%, 50%);   
  17. }   
  18. .hsl3 {   
  19.  background-color: hsl(30, 100%, 50%);   
  20. }   
  21. .hsla1 {   
  22.  color: hsl(0, 100%, 100%);   
  23.  background-color: hsla(0, 100%, 0%, 0.8);   
  24. }   
  25. .hsla2 {   
  26.  background-color: hsla(210, 100%, 50%, 0.8);   
  27. }  

CSS3中各种颜色属性的使用教程

基本上的用法就跟 rgb() 及 rgba() 一样。但有趣的是,当笔者尝试使用 jQuery 取出颜色值时,原本用 hsl() 或 hsdl() 来设定的都会是转换成 rgb() 及 rgba() 后的值。

JavaScript Code复制内容到剪贴板
  1. $(function(){   
  2.  var str = '';   
  3.  $('div:not(#log)').each(function(){   
  4.   var $this = $(this);   
  5.   str += '.' + $this.attr('class') + ' : ' + $this.css('background-color') + '<br />';   
  6.  });   
  7.  $('#log').html(str);   
  8. });  
HTML / CSS 相关文章推荐
css3绘制百度的小度熊
Oct 29 HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 #HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 #HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 #HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 #HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 #HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 #HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 #HTML / CSS
You might like
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
Smarty安装配置方法
2008/04/10 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
javascript 禁止复制网页
2009/06/11 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
js简单抽奖代码
2015/01/16 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
简单介绍Python中的JSON模块
2015/04/08 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
详谈python read readline readlines的区别
2017/09/22 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python2包含中文报错的解决方法
2018/07/09 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
python else语句在循环中的运用详解
2020/07/06 Python
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
入党思想汇报
2014/01/05 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
助理政工师申报材料
2014/06/03 职场文书
车间统计员岗位职责
2015/04/14 职场文书
把77A收信机改造成收音机
2022/04/05 无线电