JavaScript 中的 RGB 颜色模型
CSS 的 color 属性表示元素的颜色,可以使用各种方式定义,例如 RGB
、HSL
、LCH
、HWB
、Color keyword
等。你可以阅读更多关于这些内容的信息表示颜色的各种方式在这里意味着:https://en.wikipedia.org/wiki/Color_theory。
RGB
是一种流行的颜色模型,所有浏览器都支持。RGB 代表红色、蓝色和绿色,也称为原色。这些原色的不同比例会产生更多的色调。
RGB
立方模型在 X
轴上表示红色,在 Y
轴上表示绿色,在 Z
轴上表示蓝色。如果三个坐标都在 0
处相遇,则代表黑色
,255
代表白色
。
RGB
颜色可以通过两种方式定义,功能方式和十六进制方式。
功能符号接受算术
、百分比
、每通道数字 8 位
、每通道数字 12 位
、每通道数字 16 位
和每通道数字 24 位
颜色格式。可以通过两种方式定义十六进制表示法,使用 6 位数字
或 3 位数字
。
JavaScript 中 rgb()
颜色的语法
rgb($red, $green, $blue);
rgba($red, $green, $blue, $alpha);
#RRGGBB[AA]
#RGB[A]
JavaScript 中 rgb()
颜色的参数
$red
:这是一个强制性参数,用于定义最终颜色中红色脱落的强度。它的范围是0-255
函数和0-9, A-F
十六进制表示法。$green
:这是一个强制性参数,用于定义最终颜色中绿色脱落的强度。它的范围是0-255
函数和0-9, A-F
十六进制表示法。$blue
:这是一个强制性参数,用于定义最终颜色中蓝色脱落的强度。它的范围是0-255
函数和0-9, A-F
十六进制表示法。$alpha
:它是一个可选参数,用于定义颜色的透明度。它采用百分比值,浮点值。
示例代码:
<div id="demo">
<h1>Hello world!</h1>
<p>Welcome to RGB tutorial</p>
</div>
div {
color: rgb(12, 45, 255, 0.7);
padding: 20px;
}
<script>
const tag = document.getElementById("demo");
tag.style.color = "rgb(255, 45, 255, 0.7)";
</script>
输出:
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn