re:从0开始的CSS学习之路 5. 颜色单位

0. 写在前面

没想到在CSS里也要再次了解这些颜色单位,感觉回到了大二的数字图像处理,可惜现在已经大四了,感觉并没有学会什么AI的东西
在这里插入图片描述

1. 颜色单位

  1. 预定义颜色名:HTML和CSS规定了147种颜色名。例如:red yellow green blue

  2. RGB颜色值
    rgb(red, green, blue):括号中每个参数代表对应颜色的浓度
    浓度值是0-255之间的整数,0表示无浓度,255表示最大浓度
    也可以使用百分比表示浓度 0%~100%

  3. 十六进制颜色值
    #RRGGBB:RR-红色 GG-绿色 BB-蓝色,每种颜色使用十六进制整数表示浓度
    十六进制(满十六进一):0 1 2 3 4 5 6 7 8 9 A B C D E F
    例如:#ff0000
    若每种颜色的两位数值都一样可以简写为:#f00

  4. RGBA:相较于RGB多了个A表示透明度,取值范围在0.0~1.0之间
    0.0表示透明 1.0表示不透明 0.5表示半透明

  5. HSL/HSLA
    H 色调(0-360)0红色->120绿色->240蓝色
    S 饱和度(0%-100%) 0%灰色->100%全彩
    L 亮度(0%-100%) 0%黑色->100%白色
    A透明度(0.0-1.0) 0.0透明->1.0不透明

示例如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>.div1 {width: 200px;height: 200px;/* background-color: red; *//* background-color: rgb(255, 200, 0); *//* background-color: rgb(100%, 0%, 0%); *//* background-color: #f00; *//* background-color: rgba(255, 0, 0, 0.5); */background-color: hsla(0, 100%, 50%, .3);}
</head><body><div class="div1"></div>
</body></html>

实际网页开发感觉hsla用的不多,主要还是以十六进制或rgb为主

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/460021.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

米贸搜|关于Facebook广告受限:在这些情况下,Meta会限制广告主的广告能力!

如果你被限制了投放广告&#xff0c;那么你会在Facebook上收到通知。 除了审查广告之外&#xff0c;Meta还监控和调查广告主在Meta技术上的行为&#xff0c;在某些情况下&#xff0c;Meta可能会对广告主施加限制&#xff0c;限制广告主的广告能力&#xff0c;这些限制旨在帮助保…

【QT学习十三】QChart

目录 一、概述 二、头文件及配置 实例演示 三、基本功能 1. 图表组件管理 2. 系列和数据处理 3. 坐标轴管理 4. 图表绘制和显示 5. 主题和样式&#xff1a; 四、QChart 类中的一些方法 1. addSeries(QAbstractSeries *series) 2. removeSeries(QAbstractSeri…

波卡 2023 四季度报告:开发者数量位列加密生态前三,五项新技术将于今年发布

作者&#xff1a;Nicholas Garcia&#xff5c;Messari 研究分析师 编译&#xff1a;OneBlock 原文&#xff1a;https://messari.io/report/state-of-polkadot-q4-2023?utm_mediumorganic_social&utm_sourcetwitter_messari&utm_campaignstate_of_polkadot_q4_2023 …

Python Paramiko 使用交互方式获取终端输出报错

近期接到一个需求&#xff0c;要批量登录网络设备获取配置。 原计划使用 Paramiko exec即可&#xff0c;但是后来发现&#xff0c;有些设备命令也执行了&#xff0c;但是没有回显。 于是尝试使用 invoke_shell() 方式。 前期调试倒是OK&#xff0c;直到遇见一个输出内容较长的…

[VulnHub靶机渗透] dpwwn: 1

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

CV | Medical-SAM-Adapter论文详解及项目实现

******************************* &#x1f469;‍⚕️ 医学影像相关直达&#x1f468;‍⚕️******************************* CV | SAM在医学影像上的模型调研【20240207更新版】-CSDN博客 CV | Segment Anything论文详解及代码实现 本文主要讲解Medical-SAM-Adapter论文及项…

ELAdmin 的 CRUD

数据表结构 弄个测试的数据表&#xff0c;不同类型的几个字段&#xff0c;表名位 mp_reply。 生成代码 ELAdmin 可以自动生成代码。 左侧目录系统工具–代码生成&#xff0c;点开以后可以看到上面创建的数据表mp_reply&#xff0c;点击配置。 进入的页面内容有两部分&#…

单片机无线发射的原理剖析

目录 一、EV1527编码格式 二、OOK&ASK的简单了解 三、433MHZ 四、单片机的地址ID 五、基于STC15W104单片机实现无线通信 无线发射主要运用到了三个知识点&#xff1a;EV1527格式&#xff1b;OOk&#xff1b;433MHZ。下面我们来分别阐述&#xff1a; EV1527是数据的编…

IAR报错:Error[Pa045]: function “halUartInit“ has no prototype

在IAR工程.c文件末尾添加一个自己的函数&#xff0c;出现了报错Error[Pa045]: function "halUartInit" has no prototype 意思是没有在开头添加函数声明&#xff0c;即void halUartInit(void); 这个问题我们在keil中不会遇到&#xff0c;这是因为IAR编译器规则的一…

Electron实战(二):将Node.js和UI能力(app/BrowserWindow/dialog)等注入html

文章目录 设置webPreferences参数安装electron/remotemain进程中初始化html中使用dialog踩坑参考文档 上一篇&#xff1a;Electron实战(一)&#xff1a;环境搭建/Hello World/打包exe 设置webPreferences参数 为了能够在html/js中访问Node.js提供fs等模块&#xff0c;需要在n…

NLP_语言模型的雏形 N-Gram 模型

文章目录 N-Gram 模型1.将给定的文本分割成连续的N个词的组合(N-Gram)2.统计每个N-Gram在文本中出现的次数&#xff0c;也就是词频3.为了得到一个词在给定上下文中出现的概率&#xff0c;我们可以利用条件概率公式计算。具体来讲&#xff0c;就是计算给定前N-1个词时&#xff0…

c++之说_13|模板 折叠表达式

折叠表达式 可以通过形参包的的实际参数&#xff08;不是类型&#xff09; 展开式子 这是这里说的几种 实际上并还有一些写法 先介绍这几种吧 #include <cstdio> template<typename T,T... n> struct integer_sequence {T val; }; template<int idx,typenam…