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

CSS 合法颜色值

news 2026/2/8 6:25:51

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（红色&…...

编程日记 2025/1/21 5:25:19

Redis - General - 未授权访问漏洞（用户配置问题）

0x01：产品简介 Redis（Remote Dictionary Service，远程数据服务），是一款开源的基于内存的键值对存储系统，其主要被用作高性能缓存服务器使用（比如作为消息中间件和用于 Session 共享&#xff09…...

编程日记 2025/1/21 5:21:16

解决 WSL 2 中 Ubuntu 22.04 安装 Docker 后无法启动的问题

问题场景安装Docker后，执行sudo service docker start启动Docker，提示启动成功 rootDev:~# sudo service docker start * Starting Docker: docker [ OK ]执行su…...

编程日记 2025/1/21 5:18:13

Conda的一些常用命令

以下是Conda的一些常用命令： pip freeze > requirements.txt pip install -r requirements.txt 基本信息查看类查看conda版本： conda -V 或 conda --version 可以查看当前安装的conda版本。查看conda帮助信息： conda -h 或 conda --he…...

编程日记 2025/1/21 5:17:12

AI 大爆发时代，音视频未来路在何方？

AI 大模型突然大火了回顾2024年，计算机领域最大的变革应该就是大模型进一步火爆了。回顾下大模型的发展历程： 萌芽期：（1950-2005） 1956年：计算机专家约翰麦卡锡首次提出“人工智能”概念，标志…...

编程日记 2025/1/21 5:15:07

Invicti-Professional-V25.1

01 更新介绍此更新包括对内部代理的更改。内部扫描代理的当前版本为 25.1.0。内部身份验证验证程序代理的当前版本为 25.1.0。#新功能现在，单击扫描摘要屏幕中的预设扫描图标会将您重定向到具有过滤视图的 “最近扫描” 页面，从而改进导航和对相关扫描…...

编程日记 2025/1/21 5:14:05

【版图设计】2025年最新 Cadence Virtuoso IC617 虚拟机环境配置全过程集成电路版图设计环境配置

一、Cadence Virtuoso IC617 是什么？ Cadence Virtuoso 是一个电子设计自动化（EDA）工具，主要用于集成电路（IC）的设计和仿真，尤其是在模拟、混合信号和射频（RF）电路设计领…...

编程日记 2025/1/21 5:13:05

Python基本概念与实践

Python语言，总给我一种“嗯？还能这么玩儿？”的感觉 Python像一个二三十岁的年轻人，自由、年轻、又灵活欢迎一起进入Python的世界~ 本人工作中经常使用Python，针对一些常用的语法概念进行持续记录。目录一、类与常…...

编程日记 2025/1/21 5:08:01

# [Unity] 【游戏开发】获取物体和组件的脚本方法

在Unity开发中，获取游戏物体（GameObject）及其组件（Component）是脚本编程的核心技能。本文将详细介绍如何在脚本中访问游戏物体及其组件，深入讲解常用的获取方法及优化策略，以帮助开发者高效编写Unity脚本。 1. 理解游戏物体与组件的关系游戏物体（GameObject）：Unity场…...

编程日记 2025/1/21 5:06:56

10 为什么系统需要引入分布式、微服务架构

java技术的发展在java开始流行起来之后，主要服务于企业家应用，例如ERP,CRM等等，这些项目是为企业内部员工使用，我们的思维是怎么用设计模式，如何封装代码。让开发人员关注到业务上去，系统也就那么几十几百…...

编程日记 2025/1/21 5:00:45

大数据系列之：上传图片到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…...

编程日记 2025/1/21 4:59:43

wsl 使用 docker

直接在 wsl 安装 docker , 有可能会失败，可以通过在 windows 安装 Docker Desktop，然后连接 wsl 进行解决注意： 1. 需要先安装 wsl 2. 使用时要先启动 docker Desktop, 才能在 wsl 中使用下载： Docker: Accelerated Containe…...

编程日记 2025/1/21 4:58:42

归并延拓：LeetCode归并排序逆序对问题

前言欢迎来到我的算法探索博客，在这里，我将通过解析精选的LeetCode题目，与您分享深刻的解题思路、多元化的解决方案以及宝贵的实战经验，旨在帮助每一位读者提升编程技能，领略算法之美。 👉更多高频有趣Lee…...

编程日记 2025/1/21 4:57:35

51.WPF应用加图标指南 C#例子 WPF例子

完整步骤： 先使用文心一言生成一个图标如左边使用Windows图片编辑器编辑，去除背景使用正方形，放大图片使图标铺满图片使用格式工程转换为ico格式，分辨率为最大在资源管理器中右键项目添加ico类型图片到项目里图片属性设置为始终…...

编程日记 2025/1/21 4:52:28

Springboot 注解缓存使用教程

Spring Boot Cache 注解使用教程 Spring Boot 提供了强大的缓存抽象，开发者可以通过注解快速实现缓存功能，从而提高系统性能。本教程将全面介绍 Spring Boot 提供的缓存相关注解及其作用，并结合示例讲解实际应用。 1. 常用缓存注解概览 Spring Boot 缓存提供以下核心注解…...

编程日记 2025/1/21 4:51:23

Python爬虫：从入门到实践

Python爬虫学习资料 Python爬虫学习资料 Python爬虫学习资料在当今数字化信息爆炸的时代，数据已成为企业和个人发展的重要资产。Python爬虫作为一种高效获取网络数据的工具，正逐渐被广大开发者所熟知和应用。无论是市场调研、学术研究，还是…...

编程日记 2025/1/21 4:45:17

删除字符串中的所有相邻重复项(力扣1047)

这题也是属于栈的经典应用。为什么这样说呢？因为也是让我们删除相邻项。注意这里相邻项的理解，并不仅仅是说最开始的字符串相邻的项。在我们删除了某些相邻项后，会改变字符串，导致原本不相邻的字符变成相邻的，这同样属…...

编程日记 2025/1/21 4:44:14

MYSQL对数据的增删改查

DML 语句对数据进行增、删、改操作插入命令-- 插入值的个数必须和字段定义的个数相同且顺序一致 insert into <tableName> values (val ...) ; /* 不推荐使用 */insert into <tableName>(col1 , col2 , ...) values(val1, val2 , ...) ;-- 批量插…...

编程日记 2025/1/21 4:38:06

前端——Html+CSS

目录 CSS引入方式颜色表达方式 CSS选择器去掉超链接的下划线路径表示行高和首行缩进常见标签布局标签 flex布局表单标签表单项标签改变鼠标指针的样式表格标签 div{ box-sizing: border-box; } CSS引入方式具体有3种引入方式，语法如下表格所…...

编程日记 2025/1/21 4:30:52

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 …...

编程日记 2025/1/21 4:29:51

7.4.分块查找

一.分块查找的算法思想： 1.实例： 以上述图片的顺序表为例， 该顺序表的数据元素从整体来看是乱序的，但如果把这些数据元素分成一块一块的小区间， 第一个区间[0,1]索引上的数据元素都是小于等于10的， 第二…...

编程新知 2026/1/27 18:11:42

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用一、背景与挑战大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...

编程新知 2026/2/4 23:47:47

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体手搓TuyaAI语音 → 强调自主编程/自定义语音控制（TuyaAI…...

编程新知 2026/1/30 16:09:53

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/2/4 16:23:56

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...

编程新知 2025/12/14 17:38:21