CSS3中HSL和HSLA的简单使用示例


Posted in HTML / CSS onJuly 14, 2015

CSS3中HSL和HSLA的简单使用示例

使用CSS3 HSL声明同样是用来设置颜色的。下一个呢? HSLA? 是的,这个和RGBA的效果是一样的。

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中HSL和HSLA的简单使用示例

上面的演示由以下样式实现

CSS Code复制内容到剪贴板
  1. div.hslL1 { background:hsl(320, 100%, 50%); height:20px; }     
  2. div.hslL2 { background:hsl(320, 50%, 50%); height:20px; }     
  3. div.hslL3 { background:hsl(320, 100%, 75%); height:20px; }     
  4. div.hslL4 { background:hsl(202, 100%, 50%); height:20px; }     
  5. div.hslL5 { background:hsl(202, 50%, 50%); height:20px; }     
  6. div.hslL6 { background:hsl(202, 100%, 75%); height:20px; }   

CSS3 HSLA
CSS3中HSL和HSLA的简单使用示例

上面的效果由以下样式实现:

CSS Code复制内容到剪贴板
  1. div.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }     
  2. div.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }     
  3. div.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }     
  4. div.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }     
  5. div.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }    
HTML / CSS 相关文章推荐
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 #HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 #HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 #HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 #HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 #HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 #HTML / CSS
CSS实现定位元素居中的方法
Jun 23 #HTML / CSS
You might like
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
vue-router传参用法详解
2019/01/19 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python根据路径导入模块的方法
2014/09/30 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
详解python之配置日志的几种方式
2017/05/22 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
基于python3生成标签云代码解析
2020/02/18 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
如何一键升级Python所有包
2020/11/05 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
寒假社会实践个人总结
2015/03/06 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS