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模拟jq点击事件的实例代码
Jul 06 HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 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
php操作MongoDB类实例
2015/06/17 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
django框架模板语言使用方法详解
2019/07/18 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
幼儿园教师自我鉴定
2014/03/20 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
信息技术研修心得体会
2016/01/08 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js