什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条


Posted in HTML / CSS onApril 26, 2016

HSLA色彩模式是HSL色彩模式的扩展,在色彩,饱和度,亮度三要素的基础上增加了不透明度参数。使用HSLA色彩模式,可以设计不同的透明效果。
语法:

hsla(<length>,<percentage>,<percentage>,<opacity>)

表示不透明度,取值在0和1之间。

实例:模拟渐变色条

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>HSLA Color</title>  
  6. <style type="text/css">  
  7. div {height:20px;}   
  8. div:nth-child(1) { background:hsla(120,50%,50%,0.1); }   
  9. div:nth-child(2) { background:hsla(120,50%,50%,0.2); }   
  10. div:nth-child(3) { background:hsla(120,50%,50%,0.3); }   
  11. div:nth-child(4) { background:hsla(120,50%,50%,0.4); }   
  12. div:nth-child(5) { background:hsla(120,50%,50%,0.5); }   
  13. div:nth-child(6) { background:hsla(120,50%,50%,0.6); }   
  14. div:nth-child(7) { background:hsla(120,50%,50%,0.7); }   
  15. div:nth-child(8) { background:hsla(120,50%,50%,0.8); }   
  16. div:nth-child(9) { background:hsla(120,50%,50%,0.9); }   
  17. div:nth-child(10) { background:hsla(120,50%,50%,1); }   
  18. </style>  
  19. </head>  
  20.   
  21. <body>  
  22. <div></div>  
  23. <div></div>  
  24. <div></div>  
  25. <div></div>  
  26. <div></div>  
  27. <div></div>  
  28. <div></div>  
  29. <div></div>  
  30. <div></div>  
  31. <div></div>  
  32. </body>  
  33. </html>  

演示效果:

什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条

以上就是本文的全部内容,希望对大家的学习有所帮助。

HTML / CSS 相关文章推荐
详解使用CSS3的@media来编写响应式的页面
Nov 01 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 #HTML / CSS
CSS3不透明度实例讲解
Apr 26 #HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 #HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 #HTML / CSS
纯CSS3代码实现文字描边
Apr 25 #HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 #HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 #HTML / CSS
You might like
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
php 分库分表hash算法
2009/11/12 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
javascript函数定义的几种区别小结
2014/01/06 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
Vue.js用法详解
2017/11/13 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
python笔记:mysql、redis操作方法
2017/06/28 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
Python二元赋值实用技巧解析
2019/10/25 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
基于python实现对文件进行切分行
2020/04/26 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Python如何转换字符串大小写
2020/06/04 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
毕业生学校推荐信范文
2014/05/21 职场文书
社保委托书怎么写
2014/08/02 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
2016国培学习心得体会
2016/01/08 职场文书
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers