css里颜色的那些事儿(合法颜色值)
css中主要有六种方法指定颜色:
1.十六进制颜色
2.RGB颜色
3.RGBA颜色
4.HSL色彩
5.HSLA颜色
6.预定义/跨浏览器的颜色名称
前三种是我们最常见的,也是用的最多的,而后三种对于初学者来说简直就是“什么鬼?”。但是!不用怕,今天我们就来好好聊聊css中的这六位小成员的事儿。
一、十六进制颜色
十六进制颜色是个比较温和惹人爱的成员,深受所有浏览器的喜爱,它的组成部分是“#RRGGBB”,其中RR(red红色),GG(green绿色),BB(blue蓝色)。但是它也是有限制的,它的所有值必须介于0~9、A~F(a~f),不区分大小写。
div{
background-color:#8e236b;
}
下面炒几个特殊颜色的小栗子:
- #ff0000值呈现的是红色,因为红色的组成设置为最高(ff),而其他设置为0
(同理#00ff00为绿色,#0000ff为蓝色)
- #000000值为黑色
- #ffffff值为白色
二、RGB颜色
RGB颜色也是个被所有浏览器宠爱的成员,区别于十六进制颜色的是,RGB颜色值更具体一点,由于值的范围扩大,展现出的颜色也更加丰富一点。它的指定是RGB(红,绿,蓝)。每个参数定义颜色的亮度,取值范围为0~255之间的整数,或者一个从0%~100%之间的整数百分比值。
跟上一位成员一样,当它三个参数中的某个参数达到最高值的时候,它将表现为该参数的纯色。
#word{
color:rgb(255,255,153);
}
下面上图一个百度爸爸给的附带RGB的十六进制颜色码
三、RGBA颜色
这个成员就比较挑剔了,是个“不尊爱老人”的主儿,专挑青壮年以下的下手,只有IE9, Firefox3+, Chrome, Safari,和Opera10+能被宠幸。它和上面那个唯一的区别就是它的参数多了一个A:alpha通道的延伸,指定对象的透明度,让原本就多的颜色更多了一个区分通道,自然颜色也多了。
alpha参数是一个只取小数点后一位,介于0.0(完全透明)和1.0(完全不透明)之间的参数。
下面上一组RGB参数相同,A参数不同的对比图(多余样式我就不写了,主要看效果)
div{
background: rgba(223,106,95,.3);
}
div{
background: rgba(223,106,95,.9);
}
注意:当写alpha参数时,小数点前面的0可直接省去。
四、HSL颜色
说到这个成员就厉害了,作为工业街的一种颜色标准,它的色彩几乎包括了人类实力所能感知的所有颜色,是目前运用最广的颜色系统之一。这么厉害的角色,自然也是有所挑剔的,只有IE9, Firefox, Chrome, Safari,和Opera 10+能支持。
HSL是css3才出现的表现格式,代表色相、饱和度和亮度,使用色彩圆柱坐标表示。下面来看百度爸爸的解释。
1.H(hue)色相:
代表的是人眼所能感知的颜色范围,这些颜色分布在一个平面的色相环上,取值范围是0°到360°的圆心角,每个角度可以代表一种颜色。色相值的意义在于,我们可以在不改变光感的情况下,通过旋转色相环来改变颜色。在实际应用中,我们需要记住色相环上的六大主色,用作基本参照:360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红,它们在色相环上按照60°圆心角的间隔排列。大致按照红橙黄绿青蓝紫的顺序,定好大致颜色后再根据所在角度选取就好啦!
是不是不懂?上图你就明白了
当六种主色排列融合后,我们就能随便写角度选颜色啦~
2.S(saturation)分量
指的是色彩的饱和度,它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大,颜色中的灰色越少,颜色越鲜艳,呈现一种从理性(灰度)到感性(纯色)的变化。
div{
background-color:hsl(120,65%,75%);
}
这里要注意的是S和L,S控制的是颜色的鲜艳度,值越大颜色越鲜艳;而L控制的是颜色的亮度,当值为50%的时候是正常亮度。只看最大最小值就能很明显的区分出二者的不同。
div{
background-color:hsl(120,65%,75%,.5);
}
六、预定义/跨浏览器的颜色名称
147是在HTML和css颜色规范预定义的颜色名称,是所有浏览器都支持的。147包括17种标准色(浅绿色,黑色,蓝色,紫红色,灰色,灰色,绿色,石灰,栗色,海军,橄榄,紫,红,银,蓝绿色,白色和黄色) 和130多个其他。
附一个菜鸟网址,里面有详细颜色。http://www.runoob.com/cssref/css-colornames.html
结束语:
关于颜色的主要分类就是以上几种了,平时用的话没有什么太大区别,主要是表达形式的不同,其实也没有多难,结合图片看几遍就明白了。还有一些关于颜色的小知识暂时我还没有涉及到,所以就先写到这吧,如果有什么不好的请多包涵。
以上内容都是通过百度搜索,w3c,菜鸟等网站参考而来,如果有什么不对的地方欢迎指出。
css里颜色的那些事儿(合法颜色值)的更多相关文章
- CSS:CSS 合法颜色值
ylbtech-CSS:CSS 合法颜色值 1.返回顶部 1. CSS 颜色 可以用以下方法来规定 CSS 中的颜色: 十六进制色 RGB 颜色 RGBA 颜色 HSL 颜色 HSLA 颜色 预定义/ ...
- 熟悉css/css3颜色属性
颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...
- css之颜色表示法
css之颜色表示法 十六进制颜色 所有浏览器都支持十六进制颜色值. 十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色).GG(绿色).BB(蓝色)十六进制整数规定了颜色的成分.所有值必须介 ...
- 关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案
最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Conte ...
- CSS里的pointer-events属性
现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清.比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框.而本文要说的pointer-ev ...
- CSS之颜色英文代码全集
ColorHex在线颜色查询 <head> <title>CSS之颜色英文代码全集</title> <style type="text/css&qu ...
- CSS背景颜色、背景图片、平铺、定位、固定
CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:u ...
- CSS里的 no-repeat 是什么意思
CSS里的 no-repeat是针对背景图片来说的.当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平铺或者重复 ...
- 一个CSS背景颜色问题
div{ background: rgba(0,0,0,.1); background-color: #19FFFFFF; } 安卓下会显示上面的透明颜色,而在iOS上则显示下面的颜色,并且其 ...
随机推荐
- C# Windows程序窗口置前台的几种方法
这个是从别的地方看来的,放我这里 第一种:SetForegroundWindow,这个方法时灵时不灵.有人说,在自己的程序里把自己的窗口之前一般就不灵,而置前其它程序的窗口就灵.我觉得这是有原因的:当 ...
- 浅谈sql中的in与not in,exists与not exists的区别以及性能分析
1.in和exists in是把外表和内表作hash连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询,一直以来认为exists比in效率高的说法是不准确的.如果查询的两个表 ...
- $.each()和$(selector).each()
转载:http://www.jb51.net/article/65215.htm $.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的 ...
- oracle安装与备份导入
win10安装oracle因运行版本问题导致安装时提示错误(可能win10未被甲骨文公司认证) 跳过的问题 需要更改配置文件: 配置位置在 : 具体操作如下图: 在安装时win10跳过了 许是因为环 ...
- 山东省第四届acm解题报告(部分)
Rescue The PrincessCrawling in process... Crawling failed Description Several days ago, a beast ca ...
- Java_万年历(简单)
1.方法,需要一个年份,一个月份.然后在控制台输出日历 // 输入一个年份和一个月份显示日历 public static void printCalendar(int year, int month) ...
- HDU3715(二分+2-SAT)
Go Deeper Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total S ...
- python学习之老男孩python全栈第九期_day011知识点总结
# 装饰器的形成的过程:最简单的装饰器:有返回值的:有一个参数的:万能参数# 装饰器的作用# 原则:开放封闭原则# 语法糖# 装饰器的固定模式:# def wrapper(f): # 装饰器函数,f是 ...
- Linux服务器开启ssh服务,实现ssh远程登陆!
最近在学linux,使用ssh远程登陆linux,记录下来! 首先进入/etc目录下,/etc目录存放的是一些配置文件,比如passwd等配置文件,要想使用ssh远程登陆,需要配置/etc/ssh/s ...
- css3 content 特殊字符和符号
基本形状 ▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC◄ 9668 25C4 ❤ 10084 2764 ✈ 9992 2708 ★ 9733 2605 ...