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 …...
【AI学习】三、AI算法中的向量
在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：
根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见 模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...
Go 语言并发编程基础：无缓冲与有缓冲通道
在上一章节中，我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道，它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》
这段 Python 代码是一个完整的 知识库数据库操作模块，用于对本地知识库系统中的知识库进行增删改查（CRUD）操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述 该模块…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面，gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）
LeetCode 3309. 连接二进制表示可形成的最大数值（中等） 题目描述解题思路Java代码 题目描述 题目链接：LeetCode 3309. 连接二进制表示可形成的最大数值（中等） 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...
破解路内监管盲区：免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题，导致车牌识别率低、逃费率高，传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法，正成为破局关键。该设备安装于车位侧方0.5-0.7米高度，直接规避树枝遮…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...