什么是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提交意见输入框样式代码
Oct 30 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 25 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
jquery checkbox实现单选小例
2013/11/27 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
python统计cpu利用率的方法
2015/06/02 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
django实现用户注册实例讲解
2019/10/30 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
大学军训感言300字
2014/03/09 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
如何在C++中调用Python
2021/05/21 Python
用Python可视化新冠疫情数据
2022/01/18 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL