CSS之Color

1.颜色有几种写法

这里暂且不提透明色,把它放在下一部分。

(1).关键字写法:

直接指定颜色名,如red、blue、orange等。
代码示例:
<h1 style="color:red">测试</h1>

(2).十六进制写法

十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 F 之间。
举例说,#0000ff 值显示为蓝色,这是因为蓝色成分被设置为最高值(ff),而其他成分被设置为 0,此时可简写为#00f。
代码示例:
<h1 style="color:#ff0000">测试</h1>

(3).RGB写法

RGB 颜色值是这样规定的:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。
代码示例:
<h1 style="color:rgb(255,0,0)">测试</h1>

(4).HSL圆柱坐标系统写法

HSL 指的是 hue(色相)、saturation(饱和度)、lightness(明度) – 表示颜色柱面坐标表示法。HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)。Hue 是色盘上的度数(从 0 到 360) – 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值;0% 是黑色,100% 是白色。
代码示例:
<h1 style="color:hsl(0, 100%,50%)">测试</h1>

2.透明色

那么透明色如何表示呢?
RGBA颜色值、HSLA 颜色值分别是 RGB颜色值、HSL 颜色值的扩展,带有一个 alpha 通道 – 它规定了对象的不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。
代码示例:
<h1 style="color:rgba(255,0,0,0.3)">测试</h1>
<h1 style="color:hsla(0, 100%,50%,0.3)">测试</h1>

3.透明效果的实现

(1).通过设置对象背景rgba、hsla的alpha参数,可实现背景透明,文字不透明的效果。

(2).通过设置对象的 opacity,取值0~1,可实现背景透明,文字也透明的效果。如:

.demo{
  padding: 25px;
  background-color:#000000;
  opacity: 0.2;
}

4.currentColor如何来用

MDN的解释:currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上,或者嵌套元素的其他属性上。

以这么理解,currentColor相当于一个变量,用来储存当前元素的color值,当然color值可以是设定的也可以是继承而来的,然后你就可以在当前元素中使用它,它也随着color值的改变而改变。
情形1:

<div>饥人谷</div>
div{
    color: red;
}

此时,<p>标签currentColor的值为red。
情形2:

<div> <p>饥人谷</p></div>
div{
    color: red;
}

此时,<p>标签currentColor的值为red。
情形3:

<html><div> <p>饥人谷</p></div></html>
//无CSS

此时,父级元素也没有指定颜色,那它的父级元素就会从父级的父级去继承,直到文档的根结点html标签都还没显示指定一个颜色,就应用上浏览器默认的颜色。
理解了currentColor的概念,应用起来就简单了,直接当做颜色值调用即可,但是要记住当前元素中使用的是当前元素的color值。如:

<div>饥人谷</div>
div{
    color: red;
    border: 4px solid currentColor;
}

直接调用设置边框颜色。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容

  • 基础 声明变量 普通变量 默认变量 变量覆盖:只需要在默认变量之前重新声明下变量即可 变量的调用 局部变量和全局变...
    Jill1231阅读 1,267评论 0 1
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,511评论 32 459
  • -------------------------一、控制指令--------------------------...
    夜幕小草阅读 3,142评论 0 5
  • 什么是颜色 Wiki是这样说的:颜色或色彩是通过眼、脑和我们的生活经验所产生的一种对光的视觉效应。嗯,简单点说,颜...
    评评分分阅读 32,428评论 6 57
  • 在芦苇丛的暗处,一定存在着我所不知道的生物。 我希望那里生活着一群可爱的小精灵,无忧无虑的荡漾在树木和花丛里。 或...
    黑土里阅读 347评论 0 0