CSS3 颜色模式
HSL
.test{background-color:hsl(<length>, <percentage>, <percentage>);}
1.length 表示色调(Hue)
Hue衍生于色盘,取值可以为任意数值,其中0(360、-360)表示红色,60表示黄色,120表示绿色,180表示青色,240表示蓝色,300表示洋红。
2.percentage 表示饱和度(Saturation)
表示该色彩被使用了多少,即颜色的深浅程度和鲜艳程度,0%表示灰度,即没有使用该颜色,100%为颜色最鲜艳。
3.percentage 表示亮度(Lightness)
0%为最暗,显示为黑色,50%表示均值,100%最亮,显示为白色
HSLA
HSLA色彩模式是HSL色彩模式的扩展,在色相、饱和度、亮度三要素的基础上增加了不透明度参数
.test{background-color:hsla(<length>, <percentage>, <percentage>, <opacity>);}
rgba色彩模式
.test{background-color:rgba(r, g, b, <opacity>);}
整整火速取值范围为0-255,超出范围的数值将被截至其最接近的取值极限。
CSS3 颜色模式的更多相关文章
- CSS3颜色特征温故
网页是色彩的表现原理:显示器是由一个个像素构成,利用电子束来表现色彩.像素把光的三原色:红色(R).绿色(G).蓝色(B)组合成的色彩按照科学原理表现出来.一个像素包含8位元色彩的信息量,又从0 ~ ...
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- IT兄弟连 HTML5教程 CSS3属性特效 新增颜色模式
对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分.网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.随着CSS3的出现以及越来越多的浏览器对它的 ...
- 深入理解CSS六种颜色模式
前面的话 赏心悦目的颜色搭配让人感到舒服,修改元素颜色的功能让人趋之若鹜.但颜色规划不当,会让网站用户无所适从.颜色从<font color="">发展至今,保留了很多 ...
- css3 颜色记
css3 颜色 opacity 使元素呈现出半透明效果. opacity:alphavalue || inherit alphavalue:默认值为1,可以取0~1任意浮点数.取值为1时,元素完全不透 ...
- 学习笔记 css3--选择器&新增颜色模式&文本相关
Css3 选择器 --属性选择器 E[attr]只使用属性名,但没有确定任何属性值,E[attr="value"]指定属性名,并指定了该属性的属性值E[attr~="va ...
- ps中的位图,矢量图,颜色模式
什么是位图?什么是矢量图? 位图是由像素组成的图像,在缩放和旋转的时候容易失真,同时文件容量较大 矢量图是根据几何特性来绘制的图形,通过数学公式计算获得的,不易制作色彩变化太多的图象 颜色模式 RGB ...
- CSS颜色模式转换器的实现
前面的话 在CSS中,颜色的表示方式主要包括关键字.16进制.RGB模式.RGBA模式.HSL模式.HSLA模式.关于颜色模式的详细信息移步至此.本文就16进制.RGB模式及HSL模式的互相转换进行实 ...
- 如何通过 HSB 颜色模式构建夜间模式
中国睡眠研究会发布的<2017 年中国青年睡眠现状报告>显示,大约 90% 的人在睡前离不开电子产品. 不知道大家有没有感觉到普通的亮色界面会让我们在夜间使用的时侯感到刺眼,长时间使用会感 ...
随机推荐
- 300道随机四则运算小程序(java编写)
这是由Java编写的300道随机四则运算小程序, 运算数范围为0~100(不包括100),运算结果保留两位小数. 程序代码: import java.util.*; class Yunsuan{ pu ...
- Linux上多次restore Tensorflow模型报错
环境:python3,tensotflow 在恢复了预先训练好的模型进行预测时,第一次是能够成功执行的,但我多次restore模型时,出现了以下问题: 1.ValueError: Variable c ...
- windows服务外壳工具
Windows下将nginx安装为服务运行 今天看到nginx这个小服务器软件正式版更新到了1.4.2,想玩下它.这个服务器软件虽小,但功能强大,是开源软件,有着良好的性能,被很多个人.企 ...
- 软工网络15团队作业8——Beta阶段敏捷冲刺(Day6)
提供当天站立式会议照片一张 每个人的工作 1.讨论项目每个成员的昨天进展 赵铭: 数据库整理. 吴慧婷:我的世界界面完成部分. 陈敏: 我的世界功能--学习情况功能完成. 吴雅娟:我的世界功能--学习 ...
- 性能分析_linux服务器CPU_CPU利用率
CPU度量 1. 指标范围 1.1 User mode CPU utilization+ System mode CPU utilization 合理值:60-85%,如果在一个多用户系统中us+ ...
- lucene介绍
1.https://blog.csdn.net/shuaicihai/article/details/65111523 2.https://www.cnblogs.com/rodge-run/p/65 ...
- innobackupx备份原理
1.工具内容 该软件安装完成会有四个工具,如下所示: usr├── bin│ ├── innobackupex│ ├── xbcrypt│ ├── xbstream│ └── xtrabackup 其 ...
- 解题:HEOI 2016 求和
题面 我们需要知道这样一个东西(大概叫 斯特林公式?) $S(i,j)=\frac{1}{j!}\sum\limits_{k=0}^{j}(-1)^k C_j^k(j-k)^i$ 那么就是推啊 $=\ ...
- 《剑指offer》— JavaScript(22)从上往下打印二叉树
从上往下打印二叉树 题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路 借助两个辅助队列,一个用来存放结点,一个用来存放结点值: 先将根节点加入到队列中,然后遍历队列中的元素,遍历 ...
- MVC 中@Html.DropDownListFor() 设置选中项 这么不好使 ? [问题点数:40分,结帖人lkf181]
http://bbs.csdn.net/topics/390867060 由于不知道错误原因在哪 我尽量把代码都贴出来吧:重点是:在 Controller 类里 我给 SelectListItem集合 ...