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.相对定位下,如果两个兄弟 ...
随机推荐
- Android特效专辑(三)——自定义不一样的Toast
Android特效专辑(三)--自定义不一样的Toast 大家都知道,Android的控件有时候很难满足我们的需求,所以我们需要自定义View.自定义的方式很多,有继承原生控件也有直接自定义View的 ...
- Android 图片加载库Glide 实战(二),占位符,缓存,转换自签名高级实战
http://blog.csdn.net/sk719887916/article/details/40073747 请尊重原创 : skay <Android 图片加载库Glide 实战(一), ...
- git rebase之前需要commit才行
更新好本地代码后,git fetch, 接着合并,但是git rebase 不行, git status一看,有很多更新的文件. 于是 git add --后,再rebase,还是不行. 注意,reb ...
- Mac OS X下让ruby支持tcl/tk
我记得在老早在OS X10.8下使用ruby1.9.x的时候只要到下载安装ActiveTcl8.5,没怎么配置就运行tk好好的.但是近日想重新执行下tk代码,发现在require 'tk'的时候就报错 ...
- python字符串27种常见的方法
如有字符串 mystr = 'hello world itcast and itcastcpp' ,以下是常见的操作: <1>find 检测 str 是否包含在 mystr中,如果是返回开 ...
- JavaScript遍历XML总结
1:读取服务器端xml(注意不同浏览器版本的区别),使用XML可以增强系统的扩展性,只用修改XML就可以实现增加减少功能的目的. function loadXMLDoc1(dname){ if ...
- jsp面试题
1, JSP中有那些内置对象,以及作用? 共有9种基本内置组件: request 用户端请求,此请求会包含来自GET/POST请求的参数: response 网页传回用户端的回应: pageConte ...
- 温故而后知新——对ado.net中常用对象的一些解释
在使用ado.net连接数据库获取数据,一般的步骤是: 1.设置好web.config //用来设置服务器数据库的地址以及登录名密码 2.创建Connection对象 //用来创建访问数据 ...
- javaWeb安全漏洞修复总结
1 Web安全介绍1 2 SQL注入.盲注1 2.1 SQL注入.盲注概述 1 2.2 安全风险及原因 2 2.3 AppScan扫描建议 2 2.4 应用程序解决方案 4 3 会话标识未更新7 3. ...
- Html5列表元素
<ol> 有序列表: 属性:type(设置样式),reversed(倒序) <ul>无序列表 <li>表示列表中的项(在<ol>和<ul>中 ...