颜色函数- rgb 与 rgba

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Sass 关于颜色的函数有很多,我们先看一下rgb 这个函数 ... 它可以根据一个颜色里面红,绿,蓝的数量来生成一种颜色 ... 这里红,绿,蓝的数量是从 0 到 255 ... 或者也可以使用百分比来表示 ...

我们在这个 style.scss 文件里面,去试一下 ... 然后看看生成的结果 ... 用一个 body 标签选择器 ... 里面用一个背景颜色 ... 它的值,可以使用 rgb 函数来生成 ... 这里我先把 r 也就是红色的数量设置成 255 ,也就是这个颜色拥有最多的红色 ... 其它两个颜色,绿还有蓝的数量设置成 0 ...

body {
background-color: rgb(255, 0, 0);
}

保存 .. 因为这种颜色是纯红色 ... 所以,在输出的 CSS 里面,用的是 red 这个词来表示这种颜色 ... 这里我们也可以使用百分比的形式 ... 把 255 换成 100%... 同样得到的结果是纯红色 ...

在这个颜色里,再加些绿色 .. 100 ... 保存 ... 得到的结果是一种橙色 ... atom 编辑器里打开拾色器,可以使用快捷键 shift + command + c ... Windows 上是 shift + ctrl + c ..

这里,再把这个颜色里的绿色设置成 255 ... 蓝色的值仍然 0 ... 保存 ... 你会看到结果就是 yellow ... 也就是黄色 ...

想在颜色里面加上 alpha 通道,也就是,你想让一个颜色有透明的效果 .. 可以使用 rgba 这个函数 ... 这里的 a 就是 alpha ... 先把 rgb 换成 rgba ... 这个函数里面的前三个值,仍然是红,绿,蓝的用量 ...

第四个值就是这个表示透明度的值 ... 这个值是从 0 到 1 这间的数字 ... 0 表示完全透明,1表示完全不透明 ... 这里我们用一个 0.8 ... 意思就是,让这个颜色的不透明度变成 80% ...

保存 ... 在输出的结果里面,也用到了这个 rgba 函数 ... 这是标准的 CSS 函数 ... 比较现代的浏览器都支持这样的写法 ... 我们在浏览器打开使用了这个样式表的页面 ...

打开,开发者工具 ... 找到这个 body 标签的样式 .. 然后我们再修改一下这个 rgba 里面的 a 的值 ... 改成 0.5 ... 你会发现,黄色的背景又变得浅了一点 ... 其实背影颜色仍然是黄色 ... 只不过我们让它变透明了 .. 再把 0.5 换成 0.1 试一下 ... 这回因为接近完全透明了,所以,看起来会是更浅的黄色 ...

http://sass-lang.com/documentation/Sass/Script/Functions.html#rgb_functions

颜色函数- rgb 与 rgba《 Sass 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点