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系列之3D制作方法案例
Aug 14 HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
amaze ui 的使用详细教程
Aug 19 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中opendir函数用法实例
2014/11/15 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
PHP设置进度条的方法
2015/07/08 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
python encode和decode的妙用
2009/09/02 Python
python发送伪造的arp请求
2014/01/09 Python
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
计算机应用与科学个人的自我评价
2013/11/15 职场文书
门店业绩提升方案
2014/06/08 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书