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 伪元素和伪类选择器详解
Sep 04 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 HTML / CSS
box-shadow单边阴影的实现
May 21 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
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
Python中的高级数据结构详解
2015/03/27 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
python列表的常用操作方法小结
2016/05/21 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
一套Delphi的笔试题二
2013/05/11 面试题
园长自我鉴定
2013/10/06 职场文书
毕业生教师求职信
2013/10/20 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
单位单身证明样本
2014/10/11 职场文书
实习单位证明范例
2014/11/17 职场文书
初三毕业评语
2014/12/26 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
清洁工个人工作总结
2015/03/05 职场文书
宣传稿格式范文
2015/07/23 职场文书
python自动化测试之Selenium详解
2022/03/13 Python
Linux磁盘管理方法介绍
2022/06/01 Servers