前端学习笔记30-RGB&HSL
发布日期:2021-05-04 01:05:42 浏览次数:27 分类:技术文章

本文共 652 字,大约阅读时间需要 2 分钟。

前端学习笔记30-RGB

RGB值设置颜色

从前面的学习中以及看到,我们在设置颜色时,可以用颜色名称来设置,如yellow,red,blue等。但是如果我要某个颜色,我不知道它的名字要怎么办?

可以使用RGB值来实现,每一个值得范围是0~255。
看代码,

    
Document

在这里插入图片描述

可以看到,不仅可以用0~255表示,还可以用百分比表示。

屏幕取色器

可以下载一个屏幕取色器,然后提取某个颜色的RGB值,这样就可以设置想要的颜色了。

或者把鼠标放在设置颜色的语句上,vscode会自动显示颜色面板,让我们选择颜色。

RGBA

这里多了个A是设置透明度的。1表示完全不透明,0表示完全透明。

十六进制的RGB值

语法:#红色绿色绿色

每种颜色是两位十六进制数。

.box1{            width:200px;            height:200px;            background-color:rgba(255,255,0,0.5);        }        .box2{            width:200px;            height:200px;            background-color: #ffff00;        }

在这里插入图片描述

HSL

H:色相(0~360)

S:饱和度(0~100%)
L:亮度(0~100%)
我就不多解释了。

转载地址:https://blog.csdn.net/weixin_45034895/article/details/116308241 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:前端学习笔记31-文档流
下一篇:前端学习笔记29-单位

发表评论

最新留言

第一次来,支持一个
[***.219.124.196]2024年04月01日 12时30分56秒