深入理解CSS六种颜色模式
前面的话
赏心悦目的颜色搭配让人感到舒服,修改元素颜色的功能让人趋之若鹜。但颜色规划不当,会让网站用户无所适从。颜色从<font color="">发展至今,保留了很多内容,也增加了新的内容,本文将介绍关于颜色模式的内容
颜色模式
以前主要采用关键字、16进制和RGB这三种设置颜色的方式。CSS3出现后,增加了RGBA、HSL、HSLA这三种模式,极大地丰富了CSS颜色设置的方式
关键字
CSS颜色关键字包括命名颜色、transparent、currentColor属性值
命名颜色
直接使用的名字的颜色值称为命名颜色
CSS支持17种合法命名颜色(标准颜色):
aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal
[注意]浏览器支持140种颜色
transparent
color: transparent用来表示文本的颜色纯透明,可以近似认为是rgba(0,0,0,0)
[注意]IE7-不支持color:transparent,但支持background-color: transparent和border-color: transparent
currentColor
currentColor顾名思义指当前颜色,准确来讲指当前的文字颜色
[注意]IE8-不支持该属性值
16进制
16进制是设置颜色值的常用方式,将三个介于00-FF的十六进制数连接起来,若16进制的3组数各自成对,则可简写为3位
#abcdef#aabbcc <=> #abc
<安全颜色>
web安全颜色是指在256色计算机系统上总能避免抖动的颜色,表示为RGB值20%和51(相应的16进制值为33)的倍数。因此,采用16进制时,使用00\33\66\99\cc\ff认为是Web安全色,一共6*6*6=216种
RGB模式
通过组合不同的红色、绿色、蓝色分量创造出的颜色成为RGB模式的颜色。显示器是由一个个像素构成,利用电子束来表现色彩。像素把光的三原色:红色(R)、绿色(G)、蓝色(B)组合起来。每像素包含8位元色彩的信息量,有0-255的256个单元,其中0是完全无光状态,255是最亮状态
rgb(x%,y%,z%)rgb(a,b,c)
[注意]若数值小于最小值0,则默认调整为0;若数值大小最大值255,则默认调整为255
RGBA模式
rgba模式是在RGB基础上增加了alpha通道,用来设置颜色的透明度,其中这个通道值的范围是0-1。0代表完全透明,1代表完全不透明
[注意]IE8-浏览器不支持
rgba(r,g,b,a)
<IE滤镜>
IE8-浏览器对新增的颜色模式并不支持,需要使用gradient滤镜。gradient滤镜的前两位表示Alpha透明度值(00-ff),其中00表示全透明,ff表示完全不透明。后六位代表的是RGB模式
如果使用#A6DADC并且透明度为0.6的透明色(0.6*255=153,转换成16进制是99),用gradient滤镜表示为
filter:progid:DXImageTransform.Microsoft.gradient(enabled = 'true',startColorstr="#99A6DADC",endColorstr="#99A6DADC")
[注意]IE滤镜只能兼容背景色,而不能兼容前景色
HSL模式
HSL模式是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互的叠加得到各式各样的颜色。HSL标准几乎可以包括人类视力所能感知的所有颜色
[注意]IE8-浏览器不支持
hsl(h,s,l)
h:色调(hue)可以为任意整数。0(或360或-360)表示红色,60表示黄色,120表示绿色,180表示青色,240表示蓝色,300表示洋红(当h值大于360时,实际的值等于该值模360后的值)
s:饱和度(saturation),就是指颜色的深浅度和鲜艳程度。取0-100%范围的值,其中0表示灰度(没有该颜色),100%表示饱和度最高(颜色最鲜艳)
l:亮度(lightness),取0-100%范围的值,其中0表示最暗(黑色),100%表示最亮(白色)
HSLA模式
HSLA模式是HSL的扩展模式,在HSL的基础上增加一个透明通道alpha来设置透明度
[注意]IE8-浏览器不支持
hsla(<length>,<percentage>,<percentage>,<opacity>)
深入理解CSS六种颜色模式相关推荐
- css3暗黑主题,整个纯 CSS 实现暗黑模式方案
整个纯 CSS 实现暗黑模式方案 :checked.+/~和 filter 三个点进行,缺一不可.看似简单,若不是常用 CSS 做特效也很难想象出区区三个点打辅助也能完成一个这么强大的功能. 网站主体 ...
- 一个人做饭简单食谱_如何通过两个简单的寿司布局食谱来理解CSS浮动
一个人做饭简单食谱 by Anabella Spinelli 通过安娜贝拉·斯皮内利(Anabella Spinelli) 如何通过两个简单的寿司布局食谱来理解CSS浮动 (How to unders ...
- css在兼容模式下无法引用_如何在CSS中使用深色模式
css在兼容模式下无法引用 by Frank Lämmer 由FrankLämmer 如何在CSS中使用深色模式 (How to get dark mode working with CSS) I h ...
- [转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
- 深入理解CSS线性渐变linear-gradient
前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性能.如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果.渐变实际上分为线性渐变和径向渐变两种,本文介绍线性 ...
- 【Android 应用开发】Paint 滤镜原理 之 颜色矩阵 ( 颜色模式 | 颜色通道 | 颜色矩阵 | 矩阵运算 | 矩阵乘法 | 矩阵加法 | 颜色矩阵深入解析 )
文章目录 颜色模式 颜色通道 Android 中的颜色矩阵 矩阵乘法运算 滤镜中的矩阵乘法运算 矩阵加法运算 滤镜中的矩阵乘法运算 滤镜运算原理 ( 总结 ) 实际滤镜理论示例 颜色模式 颜色模式 : ...
- CSS基础(part6)--CSS的颜色表示
学习笔记,仅供参考,有错必纠 参考自:CSS中文文档 文章目录 CSS CSS的颜色表示 命名颜色 RGB颜色表示法 十六进制颜色表示法 CSS CSS的颜色表示 命名颜色 直接拿颜色的英文形式作为c ...
- 转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- RabbitMQ六种队列模式-工作队列模式
前言 RabbitMQ六种队列模式-简单队列 RabbitMQ六种队列模式-工作队列 [本文] RabbitMQ六种队列模式-发布订阅 RabbitMQ六种队列模式-路由模式 RabbitMQ六种队列 ...
最新文章
- 5.5.3 per-connection time zone support
- 伪元素:placeholder-shown:focus-within
- 图论--二分图最佳完美匹配(KM模板)
- 人工神经网络——笔记摘抄1
- jzoj4229-学习神技【逆元,费马小定理】
- 【Java数据结构与算法】第十三章 二叉排序树和平衡二叉树
- C语言和设计模式(之模板模式)
- 品质管控计划ppt怎样写_线上求助:怎么写好PPT年终总结和年度计划?
- 互联网之道,看电商的数据化管理方案
- sqlserver数据库置疑处理
- 家庭一台电脑多人上网方法
- 文件夹提示文件或目录损坏且无法读取怎么修复
- 刷机入门 手把手教程
- 斯蒂文斯理工学院计算机科学硕士,斯蒂文斯理工学院计算机科学computer science专业排名第201~250名(2020THE泰晤士高等教育世界大学排名)...
- 解决安装Visio2016 和office 2016不能兼容问题
- 视觉SLAM笔记(64) 八叉树地图
- VON矿链资本的技术含量内幕是什么?尊皇社区为你揭秘!
- swing的maven项目打成jar包
- Kibana常用搜索语法
- 单片机串口连接电脑,USB转TTL线的使用
热门文章
- 使Tomcat可以下载中文文件
- 软件设计师 --哈夫曼树的一个经典问题
- The content of elements must consist of well-formed character data or markup
- vue 父组件获取接口值传到子组件_vue父组件异步获取数据传给子组件的方法
- linq to sql 行转列_SQL 难题:行转列
- 计算机控制中mcu,MCU学习1:单片机控制应用很广,它在智能控制中起什么作用?...
- java jar包 配置文件_java 导入jar包中配置文件
- python图标的演变_python day 22 CSS拾遗之箭头,目录,图标
- Nifi 怀疑出个bug 流程中的实时数据结果痕迹没有不是实时的,是之前的。以及相应解决办法。
- 2021巨量引擎母婴行业白皮书