CSS 合法颜色值
CSS 颜色
CSS 中的颜色可以通过以下方法指定：
- 十六进制颜色
- 带透明度的十六进制颜色
- RGB 颜色
- RGBA 颜色
- HSL 颜色
- HSLA 颜色
- 预定义/跨浏览器的颜色名称
- 使用
currentcolor关键字
十六进制颜色
用 #RRGGBB 规定十六进制颜色，其中 RR（红色）、GG（绿色）和 BB（蓝色）十六进制整数指定颜色的成分（分量）。所有值必须在 00 到 FF 之间。
例如，＃0000ff 值呈现为蓝色，因为蓝色分量设置为最高值（ff），其他分量设置为 00。
实例
定义不同的 HEX 颜色：
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:#ff0000;}
#p2 {background-color:#00ff00;}
#p3 {background-color:#0000ff;}
#p4 {background-color:#ffff00;}
#p5 {background-color:#ff00ff;}
</style>
</head>
<body><h1>HEX 颜色</h1>
<p>用#RRGGBB指定十六进制颜色，其中RR（红色），GG（绿色）和BB（蓝色）十六进制整数指定颜色的组成部分。所有值必须在00到FF之间。</p><p id="p1">红色</p>
<p id="p2">绿色</p>
<p id="p3">蓝色</p>
<p id="p4">黄色</p>
<p id="p5">樱桃色</p></body>
</html>
带透明度的十六进制颜色
用 #RRGGBB 规定十六进制颜色。如需增加透明度，请在 00 和 FF 之间添加两个额外的数字。
实例
定义带透明度的 HEX 颜色：
RGB 颜色
RGB 颜色值由 rgb() 函数规定，语法如下：
rgb(red, green, blue)每个参数（red, green, blue）定义颜色的强度，可以是 0 到 255 之间的整数或百分比值（从 0％ 到 100％）。
例如，值 rgb(0,0,255) 呈现为蓝色，因为 blue 参数设置为其最高值（255），其他参数设置为 0。
此外，以下值定义相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。
实例
定义不同的 RGB 颜色：
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgb(255,0,0);}
#p2 {background-color:rgb(0,255,0);}
#p3 {background-color:rgb(0,0,255);}
#p4 {background-color:rgb(192,192,192);}
#p5 {background-color:rgb(255,255,0);}
#p6 {background-color:rgb(255,0,255);}
</style>
</head>
<body><h1>RGB 颜色</h1>
<p>RGB 颜色值通过 rgb() 函数来规定：rgb(red, green, blue)</p>
<p>每个参数（红色，绿色和蓝色）定义颜色的强度，并且可以是 0 到 255 之间的整数或百分比值（从 0％ 到 100％）。</p><p id="p1">红色</p>
<p id="p2">绿色</p>
<p id="p3">蓝色</p>
<p id="p4">灰色</p>
<p id="p5">黄色</p>
<p id="p6">樱桃色</p></body>
</html>
RGBA 颜色
RGBA 颜色值是 RGB 颜色值的扩展，它带有 Alpha 通道 - 指定对象的不透明度。
RGBA 颜色通过 rgba() 函数规定，语法如下：
rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
实例
定义带有不透明度的不同 RGB 颜色：
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body><h1>带不透明度的 RGB 颜色</h1>
<p>RGBA 颜色值是带有 Alpha 通道的 RGB 颜色值的扩展 - 它指定对象的不透明度。</p><p id="p1">红色</p>
<p id="p2">绿色</p>
<p id="p3">蓝色</p>
<p id="p4">灰色</p>
<p id="p5">黄色</p>
<p id="p6">樱桃色</p></body>
</html>
HSL 颜色
HSL 指的是色相（hue）、饱和度（saturation）和亮度（lightness）- 代表颜色的圆柱坐标表示。
使用 hsl() 函数指定 HSL 颜色值，该函数的语法如下：
hsl(hue, saturation, lightness)
色相是色轮上的度数（从 0 到 360）- 0（或 360）是红色，120 是绿色，240 是蓝色。
饱和度是一个百分比值； 0％ 表示灰色阴影，而 100％ 是全彩色。
亮度也是一个百分比； 0％ 是黑色，100％ 是白色。
实例
定义不同的 HSL 颜色：
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
</style>
</head>
<body><h1>HSL 颜色</h1>
<p>HSL 代表色相\饱和度和明度 - 表示颜色的圆柱坐标表示。</p>
<p>HSL 颜色值通过 hsl() 函数来指定 ：hsl(hue, saturation, lightness)</p>
<p>色相（Hue）是色轮上的度数（从 0 到 360）- 0（或 360）是红色，120 是绿色，240 是蓝色。饱和度（Saturation）是一个百分比值； 0％ 表示灰色阴影，而 100％ 是全彩色。亮度（Lightness）也是一个百分比； 0％ 是黑色，100％ 是白色。</p><p id="p1">绿色</p>
<p id="p2">浅绿色</p>
<p id="p3">深绿色</p>
<p id="p4">柔绿色</p>
<p id="p5">紫色</p>
<p id="p6">淡紫色</p></body>
</html>
HSLA 颜色
HSLA 颜色值是 HSL 颜色值的扩展，它带有 Alpha 通道 - 指定对象的不透明度。
HSLA 颜色值由 hsla() 函数指定，该函数的语法如下：
hsla(hue, saturation, lightness, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
实例
定义带有不透明度的不同 HSL 颜色：
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body><h1>带不透明度的 HSL 颜色</h1>
<p>HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了对象的不透明度。</p><p id="p1">绿色</p>
<p id="p2">浅绿色</p>
<p id="p3">深绿色</p>
<p id="p4">柔绿色</p>
<p id="p5">紫色</p>
<p id="p6">淡紫色</p></body>
</html>
预定义/跨浏览器的颜色名称
HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。
例如：blue、red、coral、brown 等：
实例
定义不同的颜色名：
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
</style>
</head>
<body><h1>预定义的颜色名称</h1>
<p>HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。这些只是其中的一些：</p><p id="p1">蓝色</p>
<p id="p2">红色</p>
<p id="p3">珊瑚色</p>
<p id="p4">棕色</p></body>
</html>
currentcolor 关键字
currentcolor 关键字引用元素的 color 属性值。
实例
以下 <div> 元素的边框颜色将为蓝色，因为 <div> 元素的文本颜色为蓝色：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {color: blue;border: 10px solid currentcolor;
}
</style>
</head>
<body><h1>currentcolor 关键字</h1>
<p>currentcolor 关键字引用元素的 color 属性的值。</p>
<p>下面的 div 元素的边框颜色将为蓝色，因为 div 元素的文本颜色为蓝色：</p><div id="myDIV">
这个 div 元素有蓝色文本颜色和蓝色边框。
</div></body>
</html>
相关文章：
CSS 合法颜色值
CSS 颜色 CSS 中的颜色可以通过以下方法指定： 十六进制颜色带透明度的十六进制颜色RGB 颜色RGBA 颜色HSL 颜色HSLA 颜色预定义/跨浏览器的颜色名称使用 currentcolor 关键字 十六进制颜色 用 #RRGGBB 规定十六进制颜色，其中 RR（红色&…...
Redis - General - 未授权访问漏洞（用户配置问题）
0x01：产品简介 Redis（Remote Dictionary Service，远程数据服务），是一款开源的基于内存的键值对存储系统，其主要被用作高性能缓存服务器使用（比如作为消息中间件和用于 Session 共享）…...
解决 WSL 2 中 Ubuntu 22.04 安装 Docker 后无法启动的问题
问题场景 安装Docker后，执行sudo service docker start启动Docker，提示启动成功 rootDev:~# sudo service docker start * Starting Docker: docker [ OK ]执行su…...
Conda的一些常用命令
以下是Conda的一些常用命令： pip freeze > requirements.txt pip install -r requirements.txt 基本信息查看类 查看conda版本： conda -V 或 conda --version 可以查看当前安装的conda版本。 查看conda帮助信息： conda -h 或 conda --he…...
AI 大爆发时代，音视频未来路在何方？
AI 大模型突然大火了 回顾2024年，计算机领域最大的变革应该就是大模型进一步火爆了。回顾下大模型的发展历程： 萌芽期：（1950-2005） 1956年：计算机专家约翰麦卡锡首次提出“人工智能”概念，标志…...
Invicti-Professional-V25.1
01 更新介绍 此更新包括对内部代理的更改。内部扫描代理的当前版本为 25.1.0。内部身份验证验证程序代理的当前版本为 25.1.0。#新功能现在，单击扫描摘要屏幕中的预设扫描图标会将您重定向到具有过滤视图的 “最近扫描” 页面，从而改进导航和对相关扫描…...
【版图设计】2025年 最新 Cadence Virtuoso IC617 虚拟机环境配置全过程 集成电路版图设计环境配置
一、Cadence Virtuoso IC617 是什么？ Cadence Virtuoso 是一个电子设计自动化（EDA）工具，主要用于集成电路（IC）的设计和仿真，尤其是在模拟、混合信号和射频（RF）电路设计领…...
Python基本概念与实践
Python语言，总给我一种“嗯？还能这么玩儿？”的感觉 Python像一个二三十岁的年轻人，自由、年轻、又灵活 欢迎一起进入Python的世界~ 本人工作中经常使用Python，针对一些常用的语法概念进行持续记录。 目录 一、类与常…...
# [Unity] 【游戏开发】获取物体和组件的脚本方法
在Unity开发中，获取游戏物体（GameObject）及其组件（Component）是脚本编程的核心技能。本文将详细介绍如何在脚本中访问游戏物体及其组件，深入讲解常用的获取方法及优化策略，以帮助开发者高效编写Unity脚本。 1. 理解游戏物体与组件的关系 游戏物体（GameObject）：Unity场…...
10 为什么系统需要引入分布式、微服务架构
java技术的发展 在java开始流行起来之后，主要服务于企业家应用，例如ERP,CRM等等，这些项目是为企业内部员工使用，我们的思维是怎么用设计模式，如何封装代码。让开发人员关注到业务上去，系统也就那么几十几百…...
大数据系列之：上传图片到cos、cos
大数据系列之：上传图片到cos、cos 安装python cos sdk上传图片到cos高级上传接口分页列举桶内对象cos桶之间复制cos桶之间复制图片数据 安装python cos sdk pip install -U cos-python-sdk-v5上传图片到cos # -*- codingutf-8 from qcloud_cos import CosConfig fr…...
wsl 使用 docker
直接在 wsl 安装 docker , 有可能会失败，可以通过在 windows 安装 Docker Desktop，然后连接 wsl 进行解决 注意： 1. 需要先安装 wsl 2. 使用时要先启动 docker Desktop, 才能在 wsl 中使用 下载： Docker: Accelerated Containe…...
归并延拓：LeetCode归并排序逆序对问题
前言 欢迎来到我的算法探索博客，在这里，我将通过解析精选的LeetCode题目，与您分享深刻的解题思路、多元化的解决方案以及宝贵的实战经验，旨在帮助每一位读者提升编程技能，领略算法之美。 👉更多高频有趣Lee…...
51.WPF应用加图标指南 C#例子 WPF例子
完整步骤： 先使用文心一言生成一个图标如左边使用Windows图片编辑器编辑，去除背景使用正方形，放大图片使图标铺满图片使用格式工程转换为ico格式，分辨率为最大 在资源管理器中右键项目添加ico类型图片到项目里图片属性设置为始终…...
Springboot 注解缓存使用教程
Spring Boot Cache 注解使用教程 Spring Boot 提供了强大的缓存抽象，开发者可以通过注解快速实现缓存功能，从而提高系统性能。本教程将全面介绍 Spring Boot 提供的缓存相关注解及其作用，并结合示例讲解实际应用。 1. 常用缓存注解概览 Spring Boot 缓存提供以下核心注解…...
Python爬虫：从入门到实践
Python爬虫学习资料 Python爬虫学习资料 Python爬虫学习资料 在当今数字化信息爆炸的时代，数据已成为企业和个人发展的重要资产。Python爬虫作为一种高效获取网络数据的工具，正逐渐被广大开发者所熟知和应用。无论是市场调研、学术研究，还是…...
)
删除字符串中的所有相邻重复项(力扣1047)
这题也是属于栈的经典应用。为什么这样说呢？因为也是让我们删除相邻项。注意这里相邻项的理解，并不仅仅是说最开始的字符串相邻的项。在我们删除了某些相邻项后，会改变字符串，导致原本不相邻的字符变成相邻的，这同样属…...
MYSQL对数据的增删改查
DML 语句 对数据 进行 增、删、改 操作 插入 命令-- 插入值的个数 必须和 字段定义的个数相同 且 顺序 一致 insert into <tableName> values (val ...) ; /* 不推荐使用 */insert into <tableName>(col1 , col2 , ...) values(val1, val2 , ...) ;-- 批量插…...
前端——Html+CSS
目录 CSS引入方式 颜色表达方式 CSS选择器 去掉超链接的下划线 路径表示 行高和首行缩进 常见标签 布局标签 flex布局 表单标签 表单项标签 改变鼠标指针的样式 表格标签 div{ box-sizing: border-box; } CSS引入方式 具体有3种引入方式，语法如下表格所…...
Linux（DISK：raid5、LVM逻辑卷）
赛题拓扑： 题目： DISK 添加４块大小均为10G的虚拟磁盘，配置raid-5磁盘。创建LVM命名为/dev/vg01/lv01，大小为20G，格式化为ext4，挂在到本地目录/webdata，在分区内建立测试空文件disk.txt。[root@storagesrv ~]# yum install mdadm -y [root@storagesrv ~]# mdadm -C -n …...
强化学习在并行机构人形机器人控制中的应用
1. 项目概述在机器人控制领域，强化学习(RL)正逐渐成为解决复杂动力学系统问题的有力工具。然而，当面对具有并行驱动机构的人形机器人时，传统RL训练方法往往面临一个关键挑战：大多数仿真环境无法准确模拟闭环运动链(Closed Kinemat…...
抖音数字资产管理方法论：构建个人内容沉淀系统的技术实践
抖音数字资产管理方法论：构建个人内容沉淀系统的技术实践 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback su…...
64_《智能体微服务架构企业级实战教程》授权与认证之授权认证集成测试
前言 配套视频教程： 在 Bilibili课堂、CSDN课程、51CTO学堂 同步发售，提供：源码+部署脚本+文档。 bilibili课堂视频教程：智能体微服务架构企业级实战教程_哔哩哔哩_bilibili CSDN课程视频教程：智能体微服务架构企业级实战教程_在线视频教程-CSDN程序员研修院 51CTO学堂…...
30岁裸辞后，我用两个月拿下AI应用认证，现在OFFER选择困难症犯了
30岁裸辞那天，我最怕的不是没收入，而是突然发现：过去积累的经验，正在被AI重新定价。以前会写方案、做表格、跟项目，算是职场硬通货；到了2026年，招聘JD里开始频繁出现AI工具应用、智能工作流、Pr…...
力扣HOT100（30）两两交换链表中的节点
链表的交换要注意 “链表不断链”。前驱和后继都要连着迭代法（必学死磕！O (n) 时间，O (1) 空间）1. 为什么必须用虚拟头节点？因为交换后链表的头节点会变！ 比如示例 1 中，原来的头是 1࿰…...
鸿蒙系统微博应用锁常见问题解答
为微博设置应用锁后，不少用户会有各种疑问：忘记密码怎么办？会不会影响消息推送？能不能只锁定某些功能？应用锁耗电吗？本文将针对这些高频问题逐一解答，帮助您更好地使用鸿蒙系统（Harm…...
销售怎么通过各种方法获取电话号码
第一种就是那个用爬虫电话号码，然后再打电话给客户。第二种是在别人的挪车电话看车挪车电话，然后再打电话找客户。第三就是。扫楼一顿顿的扫，第四就是这个那种商店，一个个的去问陌拜地推一个个的问店子要不要贷款，去问…...
三步实现跨架构程序兼容：Box64高效架构转换指南
三步实现跨架构程序兼容：Box64高效架构转换指南 【免费下载链接】box64 Box64 - Linux Userspace x86_64 Emulator with a twist, targeted at ARM64, RV64 and LoongArch Linux devices 项目地址: https://gitcode.com/gh_mirrors/bo/box64 你是否曾在ARM64…...
从“DOC/PDF”到“WPS”：细看GJB438C-2021文档格式要求背后的国产化信号与落地指南
从“DOC/PDF”到“WPS”：GJB438C-2021文档格式变革的深度解读与实施策略 当一份国家军用标准在文档格式描述中刻意删除"DOC/PDF"字样，转而明确标注"（WPS）文档处理器"时，这绝非简单的技术参数调整。…...
深度解析：UI-TARS视觉语言模型驱动的自动化操作框架核心技术架构
深度解析：UI-TARS视觉语言模型驱动的自动化操作框架核心技术架构 【免费下载链接】UI-TARS-desktop The Open-Source Multimodal AI Agent Stack: Connecting Cutting-Edge AI Models and Agent Infra 项目地址: https://gitcode.com/GitHub_Trending/ui/UI-TARS-…...