前端学习笔记30-RGB&HSL
发布日期:2021-05-04 01:05:42
浏览次数:27
分类:技术文章
本文共 652 字,大约阅读时间需要 2 分钟。
前端学习笔记30-RGB
RGB值设置颜色
从前面的学习中以及看到,我们在设置颜色时,可以用颜色名称来设置,如yellow,red,blue等。但是如果我要某个颜色,我不知道它的名字要怎么办?
可以使用RGB值来实现,每一个值得范围是0~255。 看代码,可以看到,不仅可以用0~255表示,还可以用百分比表示。Document
屏幕取色器
可以下载一个屏幕取色器,然后提取某个颜色的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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
第一次来,支持一个
[***.219.124.196]2024年04月01日 12时30分56秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
SpringMVC常用的注解有哪些?
2019-04-26
spring bean的生命周期
2019-04-26
计算机网络子网划分详解
2019-04-26
计算机网络生成树算法STP简介
2019-04-26
三郎数据结构算法学习笔记:哈希表查找
2019-04-26
三郎数据结构算法学习笔记:二叉树的三种遍历及增删改查
2019-04-26
三郎数据结构算法学习笔记:顺序存储二叉树
2019-04-26
三郎数据结构算法学习笔记:线索二叉树
2019-04-26
解释Spring支持的几种bean的作用域。
2019-04-26
Spring框架中都用到了哪些设计模式?
2019-04-26
什么是MyBatis?
2019-04-26
MyBatis的优点和缺点
2019-04-26
#{}和${}的区别是什么?
2019-04-26
LeetCode题解(1508):子数组和排序后的区间和(Python)
2019-04-26
LeetCode题解(1509):三次操作后最大值与最小值的最小差(Python)
2019-04-26
LeetCode题解(1510):石子游戏IV(Python)
2019-04-26
LeetCode题解(1497):检查数组对是否可以被k整除(Python)
2019-04-26
LeetCode题解(0781):森林中的兔子(Python)
2019-04-26
LeetCode题解(0930):和相同的二元子数组(Python)
2019-04-26
LeetCode题解(0939):最小面积矩形(Python)
2019-04-26