HTML中的颜色

概念

Wed安全色

不同的平台(Mac、PC等)有不同的调色板,不同的浏览器也有自己的调色板。这就意味着对于一幅图,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别很大。
Web 安全色可以使得我们不需要担心颜色在不同硬件环境、操作系统和浏览器之间的差异。
Web安全色参考


前景色与背景色

CSS 中的前景色和背景色就是 colorbackgorund-color 两个属性

color 属性表示前景色,更多地是用来表示 HTML 元素的文本内容颜色
background-color 属性表示背景色,该属性的默认值是 transparent(透明)。

色彩关键字、

色彩关键字是一个不区分大小写的标识符,其表示一个具体的颜色
transparent 关键字表示一个完全透明的颜色,并且 transparentbackground-color 属性的默认值。
颜色关键字查询

透明度

在 CSS3 版本中新增了 opacity 属性用来设置 HTML 元素的透明度,该属性的值范围介于 0.0 ~ 1.0(不透明) 之间。

  • 例 将修改文本颜色的透明度
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>练习</title>
    <style>
        .red {
            color: red;
            opacity: 0.2;
        }

        .green {
            color: green;
            opacity: 0.5;
        }

        .blue {
            color: blue;
            opacity: 0.8;
        }
    </style>
</head>

<body>
    <p class="red">时间让人成长,岁月使人成熟,奋斗激励成功。 </p>
    <p class="green">经历充实人生,挫折磨练人的意志,困难挑战人的极限。</p>
    <p class="blue">奇迹考验人的毅力,灾祸塑造人的坚强,人生就是不停地跌倒,不停的强大,坚信自己,突破自我。</p>
</body>

</html>

  • 代码效果


    image.png

颜色模式

一共有4中颜色模式,其中只有rgb属于CSS2,剩下的都是CSS3中新加的

  • rgb()

RGB是一个简称,全称为 Red-Green-Blue,即红-绿-蓝。RGB 色彩模式是工业界的一种颜色标准,是通过对红、绿、蓝三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。

CSS中有两种使用rgb的方式:十六进制符号 #RRGGBB#RGB和函数符 rgb(R, G, B)其参数可以为0到255可以为0%到%255

  • hsl()

HSL是一个简称,全称为 Hue-Saturation-Lightness,即 色调-饱和度-亮度。HSL 色彩模式是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。
在 CSS 中使用 HSL 色彩模式是通过 hsl(H, S, L) 函数实现的

H 表示色调(是色彩的基本属性,就是平常所说的颜色名称),其值范围为 0 ~ 360 之间的一个角度。
S 表示饱和度(饱和度是指颜色中灰色的含量),其值范围为 0% ~ 100% 之间的百分值。
L 表示亮度(亮度 是指颜色中黑色的含量),其值使用百分值表示。0%表示黑色,50%表示标准色,100%表示白色。

  • rgba()

在原基础上增加a,其中 A 为 alpha 表示透明度。

  • hsla()

在原基础上增加a,其中 A 为 alpha 表示透明度。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 当我在已经忘记了还有 HSL 这么个东西,最近却又用上了它的时候,我觉得还是有必要写一点关于颜色的总结(不涉及 I...
    七月初七的柒阅读 5,595评论 0 0
  • 什么是颜色 Wiki是这样说的:颜色或色彩是通过眼、脑和我们的生活经验所产生的一种对光的视觉效应。嗯,简单点说,颜...
    评评分分阅读 33,209评论 6 57
  • 因为近期项目没有压力,主要工作就是一些涉及功能增删相关的界面的小工作,修修补补,搞个图标之类,设计师小伙伴们都懂的...
    泱泱悲秋阅读 11,065评论 1 27
  • 一个女人怀抱着一个婴儿,手上牵着一个小女孩走了过来,小姑娘看到了地上的柚子,拿起一个,但是剥不开,我笑着对她说:叔...
    曲悦秋华阅读 3,808评论 3 1
  • 在哪里相见?延绵了追忆捕捉不住恬淡的掠夺如扉雨般缠绵,似季候风一样热烈想倾诉当下无聊的感觉撩开胸襟,抚摸那无波无纹...
    禹生阅读 2,481评论 0 1

友情链接更多精彩内容