当前位置: 首页 > news >正文

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!!如有问题,欢迎评论区批评指正😁

相关文章:

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

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍HTML中RGB颜色表示法和RGBA颜色表示法以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任何问题可以…...

Openwrt源码下载出现“The remote end hung up unexpected”

最近项目原因需要下载openwrt21.02版本源码&#xff0c;花费了很多时间&#xff0c;找到正确方法后&#xff0c;发现可以节省很多时间&#xff0c;记录下过程&#xff0c;方便自己&#xff0c;可能方便他人。 一.问题阐述 openwrt21.02下载链接如下&#xff1a; git clone -…...

Spring定时任务动态更改(增、删、改)Cron表达式方案实例详解

Spring定时任务动态更改&#xff08;增、删、改&#xff09;Cron表达式方案实例详解 最近在做一个需求&#xff0c;用户可以在平台上配置任务计划数据&#xff08;就是任务的执行和描述的相关信息&#xff0c;包括任务参数、cron表达式&#xff09;&#xff0c;配置后&#xf…...

常用登录加密之Shiro与Spring Security的使用对比

Shiro与Spring Security都是主流的身份认证和权限控制安全框架&#xff0c;Shiro偏向于前后端不分离平台&#xff0c;而Spring Security更偏向于前后端分离平台。接下来简单列一下两种登录验证的执行流程和示例&#xff0c;了解实际运用中的登录执行流程&#xff0c;然后重点剖…...

获取文件路径里的文件名(不包含扩展名)

“./abc/abc/llf.jpg” 写一个代码&#xff0c;让我获得“llf”这段字符串 import osfile_path "./abc/abc/llf.jpg" file_name os.path.splitext(os.path.basename(file_path))[0] print(file_name)在这个代码中&#xff0c;我们使用了os.path模块来处理文件路径…...

HiveSql语法优化二 :join算法

Hive拥有多种join算法&#xff0c;包括Common Join&#xff0c;Map Join&#xff0c;Bucket Map Join&#xff0c;Sort Merge Buckt Map Join等&#xff0c;下面对每种join算法做简要说明&#xff1a; Common Join Common Join是Hive中最稳定的join算法&#xff0c;其通过一个M…...

Leetcode—459.重复的子字符串【简单】

2023每日刷题&#xff08;五十九&#xff09; Leetcode—459.重复的子字符串 算法思想 巧解的算法思想 实现代码 从第一个位置开始到s.size()之前&#xff0c;看s字符串是否是ss的子串 class Solution { public:bool repeatedSubstringPattern(string s) {return (s s).fin…...

Mac安装Typora实现markdown自由

一、什么是markdown Markdown 是一种轻量级标记语言&#xff0c;创始人为约翰格鲁伯&#xff08;John Gruber&#xff09;。 它允许人们使用易读易写的纯文本格式编写文档&#xff0c;然后转换成有效的 XHTML&#xff08;或者HTML&#xff09;文档。这种语言吸收了很多在电子邮…...

前后端传参格式

前端发送 Serialize()方法 是指将一个抽象的JavaScript对象&#xff08;数据结构&#xff09;转换成字符串。这个字符串可以利用标准格式发送到服务器&#xff0c;被视为URL查询字符串或者POST数据&#xff0c;或者由于复杂的AJAX请求。这个方法使用的数据结构可以是JavaScri…...

【后端学前端】第三天 css动画 动态搜索框(定位、动态设置宽度)

1、学习信息 视频地址&#xff1a;css动画 动态搜索框&#xff08;定位、动态设置宽度&#xff09;_哔哩哔哩_bilibili 2、源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>test3</title>…...

51.0/表单(详细版)

目录 51.1 输入元素 input 51.1.1 文本域 51.1.2 密码输入框 51.1.3 单选框 51.1.4 复选框 51.1.5 提交按钮 51.1.6 重置按钮 51.1.7 普通按钮 51.1.8 图片按钮 51.1.9 隐藏域 51.1.10 文件域 51.2 多行文本框 51.3 下拉列表框 51.4 表单的综合示例 表单是网页中…...

动态规划(Dynamic Programming)

动态规划&#xff08;Dynamic Programming&#xff09;&#xff1a;是运筹学的一种最优化方法&#xff0c;只不过在计算机问题上应用比较多 DP常见步骤&#xff1a; 暴力递归/穷举记忆化搜索&#xff08;傻缓存 递归&#xff09;,使用备忘录/ DP Table 来优化穷举过程严格表结…...

linux使用文件描述符0、1和2来处理输入和输出

文件描述符012 在Linux中&#xff0c;文件描述符0、1和2分别代表标准输入&#xff08;stdin&#xff09;、标准输出&#xff08;stdout&#xff09;和标准错误&#xff08;stderr&#xff09;。它们用于处理进程的输入和输出。 文件描述符0&#xff08;stdin&#xff09;&…...

how to write and run .ps1

use .txt filechange the suffix to .ps1 from .txt 3&#xff09;how to run .ps1 3.1) PS D:> .\test.ps1 1 2 3 4 5 6 7 8 9 10 3.2) PS D:> tes then press tab key to compensate and complete the whole file name...

如何在PHP中处理跨域请求?

在 PHP 中处理跨域请求&#xff08;CORS&#xff0c;Cross-Origin Resource Sharing&#xff09;&#xff0c;通常需要在服务器端设置相应的 HTTP 头&#xff0c;以允许来自其他域的请求。以下是一些处理跨域请求的方法&#xff1a; 设置 HTTP 头&#xff1a; 在服务器端&#…...

spring boot 配置多数据源 踩坑 BindingException: Invalid bound statement (not found)

在上一篇&#xff1a;《【已解决】Spring Boot多数据源的时候&#xff0c;mybatis报错提示&#xff1a;Invalid bound statement (not found)》 凯哥(凯哥Java) 已经接受了&#xff0c;在Spring Boot配置多数据源时候&#xff0c;因为自己马虎&#xff0c;导致的一个坑。下面&a…...

【产品】Axure的基本使用(二)

文章目录 一、元件基本介绍1.1 概述1.2 元件操作1.3 热区的使用 二、表单型元件的使用2.1 文本框2.2 文本域2.3 下拉列表2.4 列表框2.5 单选按钮2.6 复选框2.7 菜单与表格元件的使用 三、实例3.1 登录2.2 个人简历 一、元件基本介绍 1.1 概述 在Axure RP中&#xff0c;元件是…...

Python语言学习笔记之十(字符串处理)

本课程对于有其它语言基础的开发人员可以参考和学习&#xff0c;同时也是记录下来&#xff0c;为个人学习使用&#xff0c;文档中有此不当之处&#xff0c;请谅解。 字符串处理&#xff1a;以实现字符串的分割、替换、格式化、大小写转换&#xff0c;Python字符串处理是指对Py…...

WPF-附加属性《十二》

非常重要 依赖属性和附加属性&#xff0c;两者是有关系的&#xff0c;也是有些区别的&#xff0c;很多时候&#xff0c;可能会把两者混淆了。 附加属性&#xff08;Attach Property&#xff09; 顾名思义&#xff0c;就是附加上面的属性&#xff0c;自身是没有的&#xff0c;…...

算法通关第十九关-青铜挑战理解动态规划

大家好我是苏麟 , 今天聊聊动态规划 . 动态规划是最热门、最重要的算法思想之一&#xff0c;在面试中大量出现&#xff0c;而且题目整体都偏难一些对于大部人来说&#xff0c;最大的问题是不知道动态规划到底是怎么回事。很多人看教程等&#xff0c;都被里面的状态子问题、状态…...

2023 GitHub年度排行榜,JEECG上榜第三名,势头依然很猛~

2023 GitHub年度排行榜TOP10&#xff0c;JeecgBoot上榜第三名&#xff0c;势头依然很猛~...

由@EnableWebMvc注解引发的Jackson解析异常

同事合了代码到开发分支&#xff0c;并没有涉及到改动的类却报错。错误信息如下&#xff1a; Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.http.conv…...

ce从初阶到大牛--函数

1、显示/etc/passwd文件中以bash结尾的行&#xff1b; grep "bash$" /etc/passwd2、找出/etc/passwd文件中的三位或四位数&#xff1b; grep -E \b[0-9]{3,4}\b /etc/passwd3、找出/etc/grub2.cfg文件中&#xff0c;以至少一个空白字符开头&#xff0c;后面又跟了非…...

Java学习异常类

1 定义 异常就是指程序运行时可能出现的一些错误&#xff0c;例如数组越界、除零等。 我们也可以把自己觉得不合理的结果定义为“异常” 2 异常与错误 3 Java中的异常处理 catch语句&#xff1a;对异常的处理语句放在 catch部分&#xff0c;可以包含多个catch语句&#xff0c…...

Python 全栈体系【四阶】(六)

第四章 机器学习 五、线性模型 1. 概述 线性模型是自然界最简单的模型之一&#xff0c;它描述了一个&#xff08;或多个&#xff09;自变量对另一个因变量的影响是呈简单的比例、线性关系。例如&#xff1a; 住房每平米单价为 1 万元&#xff0c;100 平米住房价格为 100 万…...

从memcpy()函数中学习函数的设计思想

memcpy()函数&#xff1a;可以理解为内存拷贝。 他的函数定义如下的 my_memcpy()函数相同。 下面这个函数是我的模拟实现&#xff0c;现在让我们一起来学习一下这个函数的设计思想&#xff1a; void * my_memcpy(void * des, const void* src, size_t size) {void * p des;…...

【PostgreSQL】从零开始:(二)PostgreSQL下载与安装

【PostgreSQL】从零开始:&#xff08;二&#xff09;PostgreSQL下载与安装 Winodws环境下载与安装PostgreSQL下载PostgreSQL安装PostgreSQL1.登录数据库2.查看下我们已有的数据库 Liunx环境下载与安装PostgreSQL使用YUM下载安装PostgreSQL1.下载PostgreSQL安装包2.安装PostgreS…...

PHP的垃圾回收机制是怎样的?

PHP 使用自动垃圾回收机制来管理内存。PHP 的垃圾回收主要依赖于引用计数和周期性垃圾回收两种策略。 引用计数&#xff1a; PHP 使用引用计数来跟踪变量的引用次数。每当一个变量被引用&#xff0c;其引用计数就增加&#xff1b;每当一个引用被释放&#xff0c;计数就减少。当…...

【数据结构】八大排序之希尔排序算法

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 一.优化直接插入排序算法 我们在之前对直接插入排序算法的优化部分通过对直接插入排序的分析可以得到一个结论,即: 进行直接插入排序的数组,如果越接近局部有序,则后续进行直…...

NestJS使用gRPC实现微服务通信

代码仓库地址&#xff1a;https://github.com/zeng-jc/rpc-grpc-practice 1.1 基本概念 gRPC 基于 Protocol Buffers&#xff08;protobuf&#xff09;作为接口定义语言&#xff08;IDL&#xff09;&#xff0c;意味着你可以使用 protobuf 来定义你的服务接口&#xff0c;gRP…...

高港区住房和城乡建设局网站/厦门seo网站排名优化

Webpack 简介 什么是 Webpack&#xff1f; webpack是一种前端资源构建工具&#xff0c;一个静态模块打包器在webpack看来&#xff0c;前端所有的资源文件都会作为模块处理它将根据模块的依赖关系进行静态分析&#xff0c;打包生成对应的静态资源(bundle)’ Webpack 五个核心…...

wordpress建站过时了/seo网站优化培训公司

武老师博客&#xff1a;ORM框架介绍 import os #1.当一类函数公用同样参数时候&#xff0c;可以转变成类运行 - 分类 #2.面向对象&#xff1a; 数据和逻辑组合在一起了 #3. 一类事物共同用有的属性和行为&#xff08;方法&#xff09;#因此 表其实可以写成一个类 #双下方法item…...

南通五建宏业建设工程有限公司网站/怎么做公司网页

2. 支持DDL语句的审计&#xff0c;数据库表创建表、删除表、修改表结构&#xff08;DDL&#xff09; 1&#xff09;新建模式&#xff1a; create schema test; 1&#xff09;创建表&#xff1a; create table test.table1 (id int primary key, a varchar(255)); 2&#x…...

大连普兰店网站建设/企业网站建站模板

wiki 地址&#xff1a;http://wiki.apache.org/solr/FrontPage&#xff0c; 里面有各个参数详细的介绍。 一.基本查询 q 查询的关键字&#xff0c;此参数最为重要&#xff0c;例如&#xff0c;qid:1&#xff0c;默认为q*:*&#xff0c; fl 指定返回哪些字段&#xff0c;用逗号…...

昆明网上房地产官网/百度惠生活怎么优化排名

0x01 起因及想法 起因:好久没更新博客了&#xff0c;我在乌云社区看到一篇代码审计的整体学习思想如下&#xff1a; 学习代码审计目标&#xff1a;能独立完成对一个CMS代码安全的监测 思路&#xff1a; A、通读全文代码&#xff0c;从功能函数代码开始阅读&#xff0c;例如incl…...

网站界面用什么做/店铺seo是什么意思

关于eclipse安装可视化工具插件 百度搜索&#xff1a;windowbuilder 进入官网 点入下载界面 找到自己相对应的版本 点解link进入界面&#xff1a;复制网址即可 打开eclipse软件&#xff1a;点解帮助&#xff0c;进入安装插件界面 最后等待即可 转载于:https://www.cnblogs.com/…...