CSS3教程(10):CSS3 HSL声明设置颜色


Posted in HTML / CSS onApril 02, 2009

使用CSS3 HSL声明同样是用来设置颜色的。下一个呢? HSLA? 是的,这个和RGBA的效果是一样的。
使用CSS3 HSL声明同样是用来设置颜色的。下一个呢? HSLA? 是的,这个和RGBA的效果是一样的。
上一篇文章:CSS3教程(9):设置RGB颜色
HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。
Hue衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色。
Saturation值是一个百分比:0%是灰度,100%饱和度最高
Lightness值也是一个百分比:0%是最暗,50%均值,100%最亮。
随想:为什么是”ligntness”呢?或许我更习惯Photoshop中的”Brightness”呢……
浏览器兼容性:
目前HSL和HSLA被Firefox、Google Chrome、和Safari浏览器较好的支持,而且不需要任何前缀 CSS3 HSL
CSS3教程(10):CSS3 HSL声明设置颜色
上面的演示由以下样式实现
div.hslL1 { background:hsl(320, 100%, 50%); height:20px; } div.hslL2 { background:hsl(320, 50%, 50%); height:20px; } div.hslL3 { background:hsl(320, 100%, 75%); height:20px; } div.hslL4 { background:hsl(202, 100%, 50%); height:20px; } div.hslL5 { background:hsl(202, 50%, 50%); height:20px; } div.hslL6 { background:hsl(202, 100%, 75%); height:20px; }
浏览器支持:

  • Firefox(3.05 …)
  • Google Chrome(1.0.154 …)
  • Google Chrome(2.0.156 …)
  • Internet Explorer(IE7, IE8 RC1 )
  • Opera(9.6 …)
  • Safari(3.2.1 windows…) CSS3 HSLA
    CSS3教程(10):CSS3 HSL声明设置颜色
    上面的效果由以下样式实现:
    div.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:20px; } div.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:20px; } div.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:20px; } div.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:20px; } div.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }
    浏览器支持:
    • Firefox(3.05 …)
    • Google Chrome(1.0.154 …)
    • Google Chrome(2.0.156 …)
    • Internet Explorer(IE7, IE8 RC1 )
    • Opera(9.6 …)
    • Safari(3.2.1 windows…)
HTML / CSS 相关文章推荐
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 #HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 #HTML / CSS
CSS3的新特性介绍
Oct 31 #HTML / CSS
CSS3属性选择符介绍
Oct 17 #HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 #HTML / CSS
细说CSS3中的选择符
Oct 17 #HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 #HTML / CSS
You might like
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP实现微信提现功能
2018/09/30 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
python绘制直方图和密度图的实例
2019/07/08 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
python 动态调用函数实例解析
2019/10/21 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
求职信写作要突出重点
2014/01/01 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
取保候审保证书
2014/04/30 职场文书
教师自我剖析材料
2014/09/29 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android