什么是RGB值，RGBA以及十六进制的RGB_翘指的博客-程序员资料
技术标签： 前端 html javascript
目录
颜色单位：
在CSS中可以直接使用颜色名来设置各种颜色
比如：red ,orange.yellow......
但是在CSS中直接使用颜色名是非常不方便的，一是因为颜色名字太多，我们不一定可以一一准确的记住，第二是因为有些颜色我们没有办法去准确的进行描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.abc{
width: 100px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="abc"></div>
</body>
</html>
RGB 值
RGB通过三种颜色的不同浓度来调配出不同的颜色
R red G green B blue
每一种颜色的范围在0~255（0%~100%）之间
语法：RGB（红色，绿色，蓝色）
另一方面，使用RGB这种数字颜色对于计算机来说是非常好的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.abc{
width: 100px;
height: 200px;
background-color: rgb(100, 200, 200);
}
</style>
</head>
<body>
<div class="abc"></div>
</body>
</html>
RGBA
就是在rgb的基础上增加了一个a表示不透明度
需要四个值，前三个和rgb一样，第四个表示不透明度
1表示不透明，0表示完全透明，.5表示半透明（也就是说透明度值在0到1之间）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.abc{
width: 100px;
height: 200px;
background-color: rgba(200, 100, 200, 0.2)
}
</style>
</head>
<body>
<div class="abc"></div>
</body>
</html>
十六进制的RGB
语法：#红色绿色蓝色
颜色浓度通过00~ff
如果颜色两位重复可以进行简写（如：#aabbcc-->abc,但是需要注意的是必须是两位重复的才可以进行简写）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.abc{
width: 100px;
height: 200px;
background-color: #ff0000;
</style>
</head>
<body>
<div class="abc"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.abc{
width: 100px;
height: 200px;
background-color: #ff0
</style>
</head>
<body>
<div class="abc"></div>
</body>
</html>
HLS值，HLSA值
H:色相（0~360）
S:饱和度，颜色的浓度（0%~100%）
L:亮度，颜色的亮度（0%~100%）
HLSA就是在HLS上增加了个透明度A
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.abc{
width: 100px;
height: 200px;
background-color: hsl(10, 20%, 30%)
</style>
</head>
<body>
<div class="abc"></div>
</body>
</html>
智能推荐
使用Linux搭建多操作系统ngrok服务（内网穿透）_两台服务器用ngrok连接_沐雨丶的博客-程序员资料
使用Linux搭建多操作系统ngrok服务文章目录使用Linux搭建多操作系统ngrok服务前言ngrok是什么鬼？准备工作1.域名和服务器（域名需要提前DNS解析到此服务器）2.Linux操作系统（本文以Centos8为例）3.开放需要用到的端口（80、443、4443等）一、编译ngrok与ngrokd1.安装go语言开发环境2.安装git（用于拉取源码）3.fork并拉取ngrok的源码4.生成自签名证书5.编译客户端程序ngrok和服务端程序ngrokd二、服务端的配置1.安装golang语言环
开源GIS软件初探（转载）_weixin_33860553的博客-程序员资料
到GIS软件，首先让我们想到的便是GIS界的龙头大哥ESRI公司旗下的ArcGIS产品，从最初接触的version 9.2到如今的version 10.1，其发展可谓风生水起。MapInfo软件也不错，可是给人的感觉是渐渐被淘汰了似的，周围使用该软件的人并不算多。然后接触了一些的是国内的SuperMap软件，MapGIS软件等，很遗憾的是作为武大的学生，竟然没有使用过GeoStar的产品。这些产品...
wampserver安装好后相关的设置和在不同的电脑上测试_天人合一peng的博客-程序员资料
1，访问在页面时直接输入IP地址就好，或者http://ip/ 也可以。要闭了防火墙。如果好了就会显示：2，要修改的文档httpd.conf文档中修改4处，最后一处暂时不用修改## This is the main Apache HTTP server configuration file. It contains the# configuration ...
不错的自学网站合集_weixin_30484739的博客-程序员资料
一、网站类1、假期在家如何查找论文资料？只需登录中国图书馆http://t.cn/hYmDq（需注册），即可免费下载各种期刊和学位论文2、全球免费开放的电子图书馆http://t.cn/h4hJUf3、给大家推荐个神网站，只要是外文书籍基本上都可以搜到并下载，并且电子书质量极高http://t.cn/hYvbf4、【小语种入门】法语入门http://t.cn/G...
按照条件查询单词并显示在JSP网页上_jsp技术实现页面数据筛选功能_姚明明的博客-程序员资料
本文目的：将所学的英文生词做成一张表，自己设计好表的字段和结构，设法放入MySQL数据库中，通过JSP网页将表中将“以A开头的名词”（即可以选字母开头、任意可选词性）统统查出来并显示在JSP网页上。上一篇博客已经介绍用JSP网页连接到MySQL数据库并显示出数据表，这里只需要加上条件查询语句即可。1. 在MySQL数据库中建立数据表用图形化管理工具Navicat Premium 连接MyS...
区块链学习——区块链的架构_区块链架构图_kingdoooom的博客-程序员资料
摘要通过我前几篇区块链知识的介绍，我们知道区块链系统实际上就是一个维护公共数据账本的系统，一切的技术单元的设计都是为了更好地维护好这个公共账本。通过共识算法达成节点的账本的数据一致；通过密码算法确保账本数据的不可篡改性以及数据发送的安全性；通过脚本系统扩展账本数据的表达范畴。我们甚至可以认为去区块链系统实际上就是特别设计的数据库系统或者分布式数据库系统，在这个数据库可以存储数字货币，也可以存储更复...
随便推点
netty那些bytebuf踩过的坑_natural_的博客-程序员资料
程序超过256个字节以后用抓包工具抓包显示消息已经发送给服务端并且服务端也回发了ack表示已经收到了，但是在read方法里并没有收到消息。 几经辗转发现问题出现在编解码器上，自己定义的解码器是这样的：ByteBuf heapBuffer = ctx.alloc().heapBuffer(); in.readBytes(heapBuffer, in.resetReaderInd...
程序员必备的15种微服务架构框架_mrchaochao的博客-程序员资料
这几年来，微服务这个概念越来越火了，火到什么程度呢？2019年有一个统计说，两千家企业里，45%在使用微服务，16%在实验开发和测试微服务架构，24%在学习微服务准备转型，只有剩下的15%的企业没有使用微服务。微服务到底有什么好呢？微服务在2013年才被提出，短短几年就有这么快速的发展。微服务架构能够实现由小型自主服务组成一个整体应用，各个组成部分之间是松耦合的，复杂性低，各个部分可以独立部署，修复bug或者引入新特性更容易，能够独立扩展，不同技术栈之间可以使用不同框架、不同版本库甚至不...
nginx向响应内容中追加内容（ngx_http_addition_module模块）_weixin_33753003的博客-程序员资料
为什么80%的码农都做不了架构师？>>> ...
20179311《网络攻防实践》第七周作业_weixin_34198762的博客-程序员资料
1.Windows操作系统的基本结构分为运行于处理器特权模式的操作系统内核，以及运行在处理器非特权模式的用户空间代码。采用宏内核模式来进行构架，这使得任意的内核模块或设备驱动程序都可能破坏其他内核模块数据，这种宏内核机制也使得Windows操作系统容易遭受以驱动方式植入内核的Rootkit的危害，为了避免这类攻击，最新的Windows7缺省要求所以请求安装进入内核执行的设备驱动程序都需要经过数字签...
centos下gcc等安装_weixin_30662011的博客-程序员资料
转自：https://www.cnblogs.com/yadongliang/p/6100003.html一.安装yum -y install gcc gcc-c++ autoconf pcre pcre-devel make automakeyum -y install wget httpd-tools vim1.查看 man yum得， install命令后可跟若干个包名，inst...
好用的免费图床_sdk/pup.js_milli236的博客-程序员资料
1.七牛云 注册免费送10G空间2.路过图床 https://imgchr.com/可以安装插件更加方便使用如:Discuz插件安装方法:在template/default/common/footer.htm顶部添加:<script async id="chevereto-pup-src" src="https://imgchr.com/sdk/pup.js" ...