HSLA色相饱和透明度
H:Hue(色调),取值为:0 - 360。将色相值想成一个圆环中的度数,随着在圆环上移动,得到不同的颜色。
S:Saturation(饱和度),取值为:0.0% - 100.0%。数值越低(降低饱和度),颜色就会向灰色变化。
L:Lightness(亮度),取值为:0.0% - 100.0%。增加亮度,颜色会向白色变化;减少亮度,颜色会向黑色变化。
A:Alpha透明度,取值0~1之间。

- HSLA色彩模式与HSL相同,只是在HSL模式上新增了Alpha透明度。
- 0和360在顶端相遇,意味着0和360均表示红色。
选择一个0到360之间的色相,并将饱和度设为100%,亮度设为50%,就会得到这种颜色最纯的形式。
li {list-style:none;margin:;padding:;width:200px;height:200px;float:left;}
.li1 {background:hsla(0,100%,50%,1);}
.li2 {background:hsla(60,100%,50%,1);}
.li3 {background:hsla(120,100%,50%,1);}
.li4 {background:hsla(180,100%,50%,1);}
.li5 {background:hsla(240,100%,50%,1);}
.li6 {background:hsla(300,100%,50%,1);}
.li7 {background:hsla(360,100%,50%,1);}
上面代码颜色效果如下:

HSLA色相饱和透明度的更多相关文章
- web前端基础知识
#HTML 什么是HTML,和他ML... 网页可以比作一个装修好了的,可以娶媳妇的房子. 房子分为:毛坯房,精装修 毛坯房的修建: 砖,瓦,水泥,石头,石子.... 精 ...
- 关于CSS3的代码总结(部分)
1. 构造样式表:selector{ Property:value; Property:value; } Selector是需要更改样式的元素,property为css属性的名称,value应用的哪种 ...
- Photoshop技能167个经典的Photoshop技巧大全
Photoshop技能167个经典的Photoshop技巧大全 学PS基础:Photoshop 技能167个 经典的Photoshop技巧大全,如果你是初级阶段的水平,熟读此文并掌握,马上进阶为中级 ...
- P图
照片名称:调出照片柔和的蓝黄色-简单方法,1.打开原图素材,按Ctrl + J把背景图层复制一层,点通道面板,选择蓝色通道,图像 > 应用图像,图层为背景,混合为正片叠底,不透明度50%,反相打 ...
- H5C3--设置颜色的几种方式
设置颜色的方式: 关键字:red|blue 第一种:十六进制:#ffffff 第二种:rgb(红,绿,蓝): rgb(ffff00) rgba(红,绿,蓝,透明度) 第三种:hsl(色相,饱和度,明度 ...
- 你知道 react-color 的实现原理吗
一.前言 ReactColor 是一个优秀的 React 颜色选择器组件,官方给了多种布局供开发者选择. 笔者常用的主题为 Sketch,这种主题涵盖了颜色面板.推荐色块.RGB颜色输入等功能,比较完 ...
- CSS3的基础用法
CSS3的现状:1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 在CSS3中增加新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度.C ...
- PS:缝线颜色随着鞋帮颜色的改变发生改变.files
1.绘制逼真缝线 (1)新建两个图层,并且命名为“针眼”和“缝线”: (2)选择“铅笔”工具,像素为“2”: (3)在针孔图层上进行缝线路径描边,并双击图层,弹出“图层样式”窗口,选择“斜面与浮雕”- ...
- CSS 知识积累
一.关于定位 1.相对定位下,不需要设定块级元素的宽度,只需要设定高度,即可以使该块级元素自适应,如果内有固定高度子元素,可以不设高度.而且可以进行top left定位. 2.相对定位下,如果两个兄弟 ...
随机推荐
- SpringBoot2.0之一 新建项目helloWorld
SpringBoot 以简单快速很快获得了广大开发者的青睐,本套SpringBoot系列以最新的SpringBoot 2.0为基础,同时会提及不同版本下SpringBoot的修改和变化,如有理解不当的 ...
- Jhipster 学习(一)jhipster构建项目
如何安装jhipster 第一步:下载jdk 自己安装的1.8版本 (安装.环境变量配置略) 第二步:1.下载Eclipse (luna版 eclipse-4.4.1) 第三步:下载maven ( ...
- 关于eclipse运行TestNG出现: CreateProcess error=206, ÎļþÃû»ò)չÃû的解决办法
最近玩物流宝的一个项目,需要测试下3个系统打通的接口. 不测不要紧,一测吓一跳.我的乖乖:几百个bean被加进来.就凭我这肉机,内存不爆才怪. 于是换一套方案,用了另一个测试接口. 但是这个测试接口, ...
- CDN公共资源
SAE: http://lib.sinaapp.com/ Google: https://developers.google.com/speed/libraries/devguide?hl=zh-CN ...
- 完整的WebRTC调用序列图
说在前面的话:此图出自Rea-Time Communication with WebRTC: https://book.douban.com/subject/25849712/ 的第五章.
- CPA、CPS、CPM、CPT、CPC 是什么
http://www.a-edm.com/cpa.html 网络营销之所以越来越受到重视一个主要的原因就是因为“精准”.相比较传统媒体的陈旧广告形式,网络营销能为广告主带来更为确切的效果与回报,更有传 ...
- C# 操作PDF 图层(Layer)——添加、删除图层、设置图层可见性
前言 通过添加图层,我们可以将文本.图片.表格.图形等元素精确定位于页面指定位置,将这些元素进行叠放.组合形成页面的最终效果.此外,对于页面中已有的图层我们也可以进行设置图层可见性.删除图层等操作.因 ...
- Java并发-容器
同步容器类:同步容器类包括Vector和Hashtable.这些类实现线程安全的方式是:将它们的状态封装起来,并对每个公有方法进行同步,使得每次只有一个线程可以访问容器的状态.JDK1.2之后,提供了 ...
- Rafy 开源贡献中心 - 组织成立,并试运行一月小结
背景 最近两年,工作中虽然大量使用了 Rafy 框架作为各个产品.项目的开发框架.我是 2015 年的年中加入现在这家公司的,由于我个人工作太忙的缘故,一直没怎么编码,Rafy 框架底层的核心成长也比 ...
- 深入理解css3中的线性渐变
css3中的线性渐变 线性渐变公式: background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, & ...