Wed安全色
不同的平台(Mac、PC等)有不同的调色板,不同的浏览器也有自己的调色板。这就意味着对于一幅图,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别很大。
Web 安全色可以使得我们不需要担心颜色在不同硬件环境、操作系统和浏览器之间的差异。
Web安全色参考
前景色与背景色
CSS 中的前景色和背景色就是 color 和 backgorund-color 两个属性
color 属性表示前景色,更多地是用来表示 HTML 元素的文本内容颜色
background-color 属性表示背景色,该属性的默认值是 transparent(透明)。
色彩关键字、
色彩关键字是一个不区分大小写的标识符,其表示一个具体的颜色
transparent 关键字表示一个完全透明的颜色,并且 transparent是 background-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 表示透明度。
