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的新特性
Sep 05 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 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
使用Yii2实现主从数据库设置
2016/11/20 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
Python生成随机数的方法
2014/01/14 Python
Python中的类与对象之描述符详解
2015/03/27 Python
详解python调度框架APScheduler使用
2017/03/28 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Python 如何在字符串中插入变量
2020/08/01 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
问卷调查计划书
2014/01/10 职场文书
领导证婚人证婚词
2014/01/13 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
JavaScript原型链详解
2021/11/07 Javascript
mysql幻读详解实例以及解决办法
2022/06/16 MySQL