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上则显示下面的颜色,并且其 ...
随机推荐
- Navicat相关应用及注意事项
一.MySQL数据类型 1.数值型 SMALLINT: 2个字节 INT: 4个字节 // age int(10) INTEGER:INT的同义词 BIGINT : 8个字节 FLOAT : ...
- RestfulAPI超简单入门
简单入门 REST -- REpresentational State Transfer,英语的直译就是"表现层状态转移" 是目前最流行的 API 设计规范,用于 Web 数据接口 ...
- visual studio 2013 下ef6 CodeFirst 使用SQL Lite 数据库
今天系统的来记录一下再vs2013下,使用ef6 codefirst功能,来操作SQL lite数据库 本来我以为sqlite数据库用的这么多,ef6肯定支持,结果,使用过程中很多坑,现在我把具体的配 ...
- js 复制粘贴
input输入框<div id="top-title" style="position: relative"> <img class=&quo ...
- form图片上传遇到错误
org.springframework.web.multipart.MultipartException: The current request is not a multipart request ...
- css3之transform属性实现div不定宽高垂直水平居中
transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...
- JavaSE——线程通信
线程通信: 如果线程A和线程B持有同一个MyObject类的对象object,这两个线程会去调用不同的方法,但是它们是同步执行的,比如:线程B需要等待线程A执行完了methodA()方法之后,它才能执 ...
- windows 服务器MYSQL 数据库安装配置
一.到官网下载MYSQL 打开官网地址:www.mysql.com, 选择 DOWNLOADS,进入到MySQL的下载页面,在页面的底部有一个MySQL Community Edition, 并且下面 ...
- Azure 中 Windows 虚拟机的大小
本文介绍可用于运行 Windows 应用和工作负荷的 Azure 虚拟机的可用大小和选项. 此外,还提供在计划使用这些资源时要考虑的部署注意事项. 本文也适用于 Linux 虚拟机. 类型 大小 说明 ...
- Sql server中的 nvarchar(max) 到底有多大?(转载)
问题: SQL server中的nvarchar(max)最大的长度是4000个字吗? 如果字段的内容超过4000个字时用什么类型呢?text 还是binary?他们的最大长度是多少?比如字段放的是长 ...