(点击图片进入关卡)
使用rgb() CSS函数指定特定颜色！
简介
rgb() 是一个函数，它以 3 个数作为参数。
p {
color: rgb(255, 0, 127);
}
默认代码
<!-- 有时颜色名称像“"red"和 "green"… -->
<!-- ......不传达想要的情感。 -->
<!-- CSS附带一个名为"rgb()"的函数。 -->
<!-- 它需要3个数字作为参数，每个数字… -->
<!-- …范围从0到255。 -->
<style>
div {
width:100%;
height:64px;
border:2px dotted rgb(191, 100, 191);
}
.color1 {
/* 这三个数字对应是红色，绿色和蓝色 */
/* 就像"rgb"一样！ */
/* 它们各自代表颜色的数量。 */
}
.color2 {
}
.color3 {
}
.color4 {
}
.color5 {
/* 使用 rgb()设置背景颜色 */
}
.color2 {
/* 使用 rgb()设置背景颜色 */
}
</style>
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
<div class="color5"></div>
<div class="color6"></div>
概览
rgb
rgb() 是一个类似于 scale() 和 rotate() 的CSS函数。它是用于自定义颜色的辅助函数。
它有3个参数： red 、 green 和 blue 。 rgb() 的三个字母就来自于这三个单词。颜色对应数值越大，意味着该颜色会更多地呈现在最终渲染得到的颜色中。
参数取值范围是 0 到 255 。
p {
/* 这是白色！ */
color: rgb(255, 255, 255);
}
div {
/* 这是黑色！ */
}
img {
/* 这是橙色！ */
}
精确着色 解法
<!-- 有时颜色名称像“"red"和 "green"… -->
<!-- ......不传达想要的情感。 -->
<!-- CSS附带一个名为"rgb()"的函数。 -->
<!-- 它需要3个数字作为参数，每个数字… -->
<!-- …范围从0到255。 -->
<style>
div {
width:100%;
height:64px;
border:2px dotted rgb(191, 100, 191);
}
.color1 {
/* 这三个数字对应是红色，绿色和蓝色 */
/* 就像"rgb"一样！ */
/* 它们各自代表颜色的数量。 */
}
.color2 {
}
.color3 {
}
.color4 {
}
.color5 {
/* 使用 rgb()设置背景颜色 */
}
.color6 {
/* 使用 rgb()设置背景颜色 */
}
</style>
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
<div class="color5"></div>
<div class="color6"></div>
本攻略发于极客战记官方教学栏目，原文地址为：