HTML中RGB颜色表示法和RGBA颜色表示法

Hi i,m JinXiang


⭐ 前言 ⭐

本篇文章主要介绍HTML中RGB颜色表示法和RGBA颜色表示法以及部分理论知识


🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获,友友们有任何问题可以在评论区留言


目录

RGB颜色表示法

1. RGB值:

2. 十六进制值:

3. 颜色名称:

RGB颜色表示法混搭(红绿蓝)

RGBA颜色表示法


RGB颜色表示法

在HTML中,RGB颜色表示法是一种用于指定颜色的方法。RGB代表红绿蓝,

  • 红色   Rad  取值范围:0~255
  • 绿色   Green 取值范围:0~255
  • 蓝色   Blue  取值范围:0~255

每个颜色的值在0到255之间。

RGB颜色表示法使用三个数字来表示颜色的红色、绿色和蓝色分量。可以使用以下三种方式之一来表示颜色:

1. RGB值:

使用rgb()函数,并在括号中提供三个整数值,分别表示红、绿和蓝的分量。例如,rgb(255, 0, 0)代表红色,rgb(0, 255, 0)代表绿色,rgb(0, 0, 2]55)代表蓝色。

2. 十六进制值:

使用#字符后跟六个十六进制数字来表示颜色。前两个数字表示红色分量,接下来的两个数字表示绿色分量,最后两个数字表示蓝色分量。每个十六进制数字可以是0-9以及A-F之间的任何一个值。例如,#FF0000代表红色,#00FF00代表绿色,#0000FF代表蓝色。

3. 颜色名称:

使用预定义的颜色名称来表示颜色,例如red、green、blue等。

以下是一些示例:

<p style="color: rgb(255, 0, 0)">红色文字展示</p>
<p style="color: #00FF00">绿色文字展示</p>
<p style="color: blue">蓝色文字展示</p>

请注意,RGB颜色值也可以用于其他HTML元素的背景色、边框颜色等。

RGB颜色表示法混搭(红绿蓝)

1、当红色与不同颜色进行混合时,会产生不同的颜色效果。以下是一些常见的混合结果:

  • - 红色 + 绿色 = 黄色
  • - 红色 + 蓝色 = 品红色(洋红)
  • - 红色 + 黄色 = 橙色
  • - 红色 + 青色 = 紫色
  • - 红色 + 白色(白光)= 纯红色
  • - 红色 + 黑色(无光)= 暗红色

请注意,这里提到的颜色是基于理论混合的结果,实际显示效果可能会因设备和色彩空间的差异而有所不同。

2、当绿色与不同颜色进行混合时,会产生不同的颜色效果。以下是一些常见的混合结果:

  • - 绿色 + 红色 = 黄色
  • - 绿色 + 蓝色 = 青色
  • - 绿色 + 黄色 = 黄绿色
  • - 绿色 + 紫色 = 暗绿色
  • - 绿色 + 白色(白光)= 纯绿色
  • - 绿色 + 黑色(无光)= 暗绿色

同样地,具体的色彩效果可能会因设备和色彩空间的差异而有所不同。

3、当蓝色与不同颜色进行混合时,会产生不同的颜色效果。以下是一些常见的混合结果:

  • - 蓝色 + 红色 = 洋红色
  • - 蓝色 + 绿色 = 青色
  • - 蓝色 + 黄色 = 白色
  • - 蓝色 + 紫色 = 深蓝色
  • - 蓝色 + 黑色(无光)= 暗蓝色

需要注意的是,混合颜色的结果也会受到颜色的强弱比例影响,具体的色彩效果可能会因设备和色彩空间的差异而有所不同。

RGBA颜色表示法

RGBA颜色表示法在RGB的基础上添加了一个透明度(Alpha)通道,用于控制颜色的透明度。透明度值的范围是0~1,其中0表示完全透明,1表示完全不透明。

  • 通过RGBA颜色表示法,可以控制元素的颜色和透明度。例如,(255, 0, 0, 0.5)表示半透明的红色,(0, 255, 0, 1)表示完全不透明的绿色。
<p style="color: rgba(255, 0, 0, 0.5)">这是一个RGBA的示例文本</p>

在HTML中,可以使用RGB或RGBA颜色表示法来设置元素的颜色。例如,以下代码将一个段落的文本设置为红色,并设置透明度为50%。

总结不易,希望uu们不要吝啬亲爱的👍哟(^U^)ノ~YO!!如有问题,欢迎评论区批评指正😁

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

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

相关文章

初级数据结构(六)——堆

文中代码源文件已上传&#xff1a;数据结构源码 <-上一篇 初级数据结构&#xff08;五&#xff09;——树和二叉树的概念 | NULL 下一篇-> 1、堆的特性 1.1、定义 堆结构属于完全二叉树的范畴&#xff0c;除了满足完全二叉树的限制之外&#xff0c;还满…

SolidWorks二次开发 C#-读取基于Excel的BOM表信息

SolidWorks二次开发 C#-读取基于Excel的BOM表信息 问题点来源解决方案及思路相关引用链接 问题点来源 这是一位粉丝问的一个问题&#xff0c;他说到: 老师&#xff0c;请问Solidworks二次开发工程图中"基于Excel的材料明细表"怎么读取里面的数据&#xff1f; Ps:这…

leetcode刷题日志-383赎金信

思路&#xff1a;分别用两个map记录ransomNote和magazine中的字符以及出现的次数。最后遍历记录ransomNote的map&#xff0c;如果ransomNote的map中出现的magazine的map中没有出现或者出现的次数小于ransomNote的map则返回false&#xff0c;否则返回true&#xff1b; class So…

设计一个算法用于判断循环双链表是否对称。

题目描述&#xff1a;设计一个算法用于判断循环双链表是否对称。 分析&#xff1a; 分为两个情况&#xff0c;奇和偶&#xff0c;为奇&#xff08;qp&#xff09;时用q!p作为结束条件&#xff0c;为偶(p->nextq&&q->priorp)时用 q->next ! p 作为结束条件&am…

arcgis api for js 图层标注文本不显示

在打包arcgis api for js 项目后&#xff0c;更新到现场所有地图文本要素不显示的时候。 可能就是环境设置问题了&#xff0c;需要配置iis或者ngixs里边配置如下类型 iis发布的项目 1、打开iis中发布的网站 2、找到网站的MIME类型如下图 3、添加一下类型&#xff08;一个都不…

机器学习项目精选 第一期:超完整数据科学资料合集

大噶吼&#xff0c;不说废话&#xff0c;分享一波我最近看过并觉得非常硬核的资源&#xff0c;包括Python、机器学习、深度学习、大模型等等。 1、超完整数据科学资料合集 地址&#xff1a;https://github.com/krishnaik06/The-Grand-Complete-Data-Science-Materials Pytho…

安全CDN有什么作用,安全CDN工作原理是什么?

一、CDN的应用场景 CDN技术可以应用于各种类型的网站和应用程序&#xff0c;特别是对于以下几种场景&#xff0c;CDN的作用尤为明显&#xff1a; 1. 高流量网站&#xff1a;对于流量较大的网站&#xff0c;CDN可以将网站的内容分发到全球各地的节点上&#xff0c;从而分担服务…

【Linux API 揭秘】container_of函数详解

我的圈子&#xff1a; 高级工程师聚集地 我是董哥&#xff0c;高级嵌入式软件开发工程师&#xff0c;从事嵌入式Linux驱动开发和系统开发&#xff0c;曾就职于世界500强企业&#xff01; 创作理念&#xff1a;专注分享高质量嵌入式文章&#xff0c;让大家读有所得&#xff01; …

1852_bash中的find应用扩展

Grey 全部学习内容汇总&#xff1a; https://github.com/GreyZhang/toolbox 1852_bash中的find应用扩展 find这个工具我用了好多年了&#xff0c;但是是不是真的会用呢&#xff1f;其实不然&#xff0c;否则也不会出现这种总结式的笔记。其实&#xff0c;注意部分小细节之后…

liunx之Samba服务器

环境&#xff1a;虚拟机CENTOS 7和 测试机相通 一、Samba服务器_光盘共享&#xff08;匿名访问&#xff09; 1.在虚拟机CENTOS 7安装smb服务&#xff0c;并在防火墙上允许samba流量通过 2. 挂载光盘 3.修改smb.conf配置文件&#xff0c;实现光盘匿名共享 4. 启动smb服务 5.在…

GB/T 19536-2015 集装箱底板用胶合板检测

集装箱底板用胶合板是指由木质单板或竹质单元与木质单板复合而成的&#xff0c;具有防虫、防腐及耐候性能&#xff0c;用于一般货物集装箱底板的胶合板。 GB/T 19536-2015集装箱底板用胶合板测试&#xff1a; 测试项目 测试方法 含水率 GB/T 17657 密度 GB/T 17657 静曲…

编写自定义函数找出二维数组(3*4)中元素的最大值与最小值,并返回其最大值与最小值,并在main函数中测试结果

编写自定义函数找出二维数组&#xff08;3*4&#xff09;中元素的最大值与最小值&#xff0c;并返回其最大值与最小值&#xff0c;并在main函数中测试结果。要求&#xff1a; 数组在main函数中使用随机函数获得赋值&#xff1b;自定义函数返回类型为void&#xff1b;输出结果在…

手麻、腿麻、麻痛…背后竟隐藏7大疾病!多一个人知道,少一个悲剧!

手脚麻木背后的7大病症&#xff1a;骨病、脑梗、肿瘤…… 1、神经问题 上图四只手上橙色的区域代表了麻木感&#xff0c;如果您的手麻集中在无名指和小指的区域&#xff0c;您可以拿一张纸&#xff0c;用五个手指分别试着夹住&#xff0c;检验您的五个手指力量&#xff1b;您还…

(5)shell命令以及Linux的权限

写在前面 本章我们将重点讲解 Linux 权限&#xff0c;这是 Linux 基础部分中非常重要的一部分。内容比较干&#xff0c;我会稍稍正经些去讲解。话不多说&#xff0c;我们直接切入正题。 shell 命令及运行原理 严格意义上说的是一个操作系统&#xff0c;我们称之为 —— &…

Logstash访问安全访问Elasticsearch集群

生成logstash证书: opensal pkcs12 -in elastic-stack-ca.p12 -clcerts -nokeys > logafash.cer openssl x509 -in logstash.cer -out logstash.pem 编排配置文件

xtu oj 1328 数码和

题目描述 一个10进制数n在2∼16进制下可以得到的不同的数码和&#xff0c;求在这些数码和中出现次数最多的数码和。 比如20&#xff0c; 其中数码和2和4分别出现了3次&#xff0c;为最多出现次数。 输入 第一行是一个整数T(1≤T≤1000)&#xff0c;表示样例的个数。 以后每行…

Sherlock:社交媒体账号搜索工具 | 开源日报 No.111

sherlock-project/sherlock Stars: 45.1k License: MIT 这个项目是一个社交媒体账号搜索工具&#xff0c;名为 Sherlock。它可以通过用户名在不同的社交网络上追踪用户的账号。 支持单个或多个用户搜索提供 Docker 容器化部署方式开放源代码并欢迎贡献者参与开发包含详细测试…

Shell三剑客:sed(命令)一

一、删除命令&#xff1a;d [rootlocalhost ~]# sed -r /root/d passwd.txt bin:x:1:1:bin:/bin:/sbin/nologin daemon:x:2:2:daemon:/sbin:/sbin/nologin adm:x:3:4:adm:/var/adm:/sbin/nologin lp:x:4:7:lp:/var/spool/lpd:/sbin/nologin sync:x:5:0:sync:/sbin:/bin/sync…

【深度学习】重要概念

文章目录 1. 前向传播、反向传播和计算图2. 数值稳定性和模型初始化3. 环境和分布偏移 1. 前向传播、反向传播和计算图 前向传播&#xff1a;按顺序&#xff08;从输入层到输出层&#xff09;计算和存储神经网络中每层的结果。计算图&#xff1a;可视化计算中操作符和变量的依…

C# 内存的分配管理

using System.ComponentModel; using System.Runtime.InteropServices; //内存的分配 int n 100000;//长度 IntPtr buffer Marshal.AllocHGlobal(sizeof(int) * n); try { var t buffer (n * 10) * sizeof(int); var p Marshal.PtrToStructure<int>(t); /…