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>

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

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

相关文章

使用docker-compose安装ELK（elasticsearch，logstash，kibana）并简单使用

使用docker-compose安装ELK（elasticsearch，logstash，kibana）并简单使用

首先服务器上需要安装docker已经docker-compose&#xff0c;如果没有&#xff0c;可以参考我之前写的文章进行安装。 https://blog.csdn.net/a_lllk/article/details/143382884?spm1001.2014.3001.5502 1.下载并启动elk容器 先创建一个网关&#xff0c;让所有的容器共用此网…
阅读更多...
二十四、NetworkPolicy

二十四、NetworkPolicy

NetworkPolicy 一、基础网路 Kubernetes网络模型设计的一个基础原则是：每个Pod都拥有一个独立的IP地址，并假定所有Pod都在一个可以直接连通的、扁平的网络空间中。所以不管它们是否运行在同一个Node（宿主机）中，都要求它们可以直接通过对方的IP进行访问。设计这个原则的原…
阅读更多...
Java操作Excel导入导出——POI、Hutool、EasyExcel

Java操作Excel导入导出——POI、Hutool、EasyExcel

目录 一、POI导入导出 1.数据库导出为Excel文件 2.将Excel文件导入到数据库中 二、Hutool导入导出 1.数据库导出为Excel文件——属性名是列名 2.数据库导出为Excel文件——列名起别名 3.从Excel文件导入数据到数据库——属性名是列名 4.从Excel文件导入数据到数据库…
阅读更多...
下载文件，浏览器阻止不安全下载

下载文件，浏览器阻止不安全下载

背景&#xff1a; 在项目开发中&#xff0c;遇到需要下载文件的情况&#xff0c;文件类型可能是图片、excell表、pdf、zip等文件类型&#xff0c;但浏览器会阻止不安全的下载链接。 效果展示&#xff1a; 下载文件的两种方式&#xff1a; 一、根据接口的相对url&#xff0c;拼…
阅读更多...
SD/MMC驱动开发

SD/MMC驱动开发

一、介绍 MMC的全称是”MultiMediaCard”――所以也通常被叫做”多媒体卡”&#xff0c;是一种小巧大容量的快闪存储卡,特别应用于移动电话和数字影像及其他移动终端中。MMC存贮卡只有7pin&#xff0c;可以支持MMC和SPI两种工作模式。 SD卡&#xff0c;数字安全记忆卡&#xf…
阅读更多...
Elasticsearch：Jira 连接器教程第一部分

Elasticsearch：Jira 连接器教程第一部分

作者&#xff1a;来自 Elastic Gustavo Llermaly 将我们的 Jira 内容索引到 Elaasticsearch 中以创建统一的数据源并使用文档级别安全性进行搜索。 在本文中&#xff0c;我们将回顾 Elastic Jira 原生连接器的一个用例。我们将使用一个模拟项目&#xff0c;其中一家银行正在开发…
阅读更多...
Linux操作系统的灵魂，深度解析MMU内存管理

Linux操作系统的灵魂，深度解析MMU内存管理

在计算机的奇妙世界里&#xff0c;我们每天使用的操作系统看似流畅自如地运行着各类程序&#xff0c;背后实则有着一位默默耕耘的 “幕后英雄”—— 内存管理单元&#xff08;MMU&#xff09;。它虽不常被大众所熟知&#xff0c;却掌控着计算机内存的关键命脉&#xff0c;是保障…
阅读更多...
【云岚到家】-day02-客户管理-认证授权

【云岚到家】-day02-客户管理-认证授权

第二章 客户管理 1.认证模块 1.1 需求分析 1.基础概念 一般情况有用户交互的项目都有认证授权功能&#xff0c;首先我们要搞清楚两个概念&#xff1a;认证和授权 认证: 就是校验用户的身份是否合法&#xff0c;常见的认证方式有账号密码登录、手机验证码登录等 授权:则是该用…
阅读更多...
Thinkphp8 Apidoc 实际使用中遇到的问题解决

Thinkphp8 Apidoc 实际使用中遇到的问题解决

1. 接口去掉 Controller 问题: 正确的路径应该是/api/login/register, 这块controller有没有地方配置的? 2. 自定义成功,错误消息有没有办法? 未完成, 待更新
阅读更多...
C++的auto_ptr智能指针：从诞生到被弃用的历程

C++的auto_ptr智能指针：从诞生到被弃用的历程

C作为一种功能强大的编程语言&#xff0c;为开发者提供了众多便捷的特性和工具&#xff0c;其中智能指针是其重要特性之一。智能指针能够自动管理内存&#xff0c;有效避免内存泄漏等常见问题。然而&#xff0c;并非所有智能指针都尽善尽美&#xff0c;auto_ptr便是其中的一个例…
阅读更多...
游戏开发中常用的设计模式

游戏开发中常用的设计模式

目录 前言一、工厂模式二、单例模式三、观察者模式观察者模式的优势 四、状态模式状态模式的优势 五、策略模式策略模式的优势策略模式与状态模式有什么区别呢? 六、组合模式七、命令模式八、装饰器模式 前言 本文介绍了游戏开发中常用的设计模式&#xff0c;如工厂模式用于创…
阅读更多...
Navicat Premium 数据可视化

Navicat Premium 数据可视化

工作区&#xff0c;数据源以及图表 数据可视化是使用可视化组件&#xff08;例如图表&#xff0c;图形和地图&#xff09;的信息和数据的图形表示。 数据可视化工具提供了一种可访问的方式&#xff0c;用于查看和理解数据中的趋势&#xff0c;异常值和其他模式。 在Navicat中&…
阅读更多...
【系统分享01】Python+Vue电影推荐系统

【系统分享01】Python+Vue电影推荐系统

大家好&#xff0c;作为一名老程序员&#xff0c;今天我将带你一起走进电影推荐系统的世界&#xff0c;分享如何利用 Django REST Framework 和 Vue 搭建一套完整的电影推荐系统&#xff0c;结合 协同过滤算法&#xff0c;根据用户评分与影片喜好&#xff0c;精准推送用户可能喜…
阅读更多...
【大数据2025】MapReduce

【大数据2025】MapReduce

MapReduce 基础介绍 起源与发展&#xff1a;是 2004 年 10 月谷歌发表的 MAPREDUCE 论文的开源实现&#xff0c;最初用于大规模网页数据并行处理&#xff0c;现成为 Hadoop 核心子项目之一&#xff0c;是面向批处理的分布式计算框架。基本原理&#xff1a;分为 map 和 reduce …
阅读更多...
主从复制

主从复制

简述mysql 主从复制原理及其工作过程&#xff0c;配置一主两从并验证。 主从原理&#xff1a;MySQL 主从同步是一种数据库复制技术&#xff0c;它通过将主服务器上的数据更改复制到一个或多个从服务器&#xff0c;实现数据的自动同步。 主从同步的核心原理是将主服务器上的二…
阅读更多...
【博客之星评选】2024年度前端学习总结

【博客之星评选】2024年度前端学习总结

故事的开端...始于2024年第一篇前端技术博客 那故事的终末...也该结束于陪伴了我一整年的前端知识了 踏入 2025 年&#xff0c;满心激动与自豪&#xff0c;我成功闯进了《2024 年度 CSDN 博客之星总评选》的 TOP300。作为一名刚接触技术写作不久的萌新&#xff0c;这次能走到这…
阅读更多...
《TikTok停服：信息安全警钟长鸣》

《TikTok停服：信息安全警钟长鸣》

一、TikTok 停服事件回顾 2025 年 1 月 18 日晚&#xff0c;TikTok 通知美国用户&#xff0c;由于美官方禁令于 19 日起生效&#xff0c;TikTok 软件将暂时对用户停止服务。这一消息犹如一颗重磅炸弹&#xff0c;瞬间在全球范围内掀起轩然大波。美国用户对此猝不及防&#xff0…
阅读更多...
图论DFS：黑红树

图论DFS：黑红树

我的个人主页 {\large \mathsf{{\color{Red} 我的个人主页} } } 我的个人主页 往 {\color{Red} {\Huge 往} } 往 期 {\color{Green} {\Huge 期} } 期 文 {\color{Blue} {\Huge 文} } 文 章 {\color{Orange} {\Huge 章}} 章 DFS 算法&#xff1a;记忆化搜索DFS 算法&#xf…
阅读更多...
C++，设计模式，【目录篇】

C++，设计模式，【目录篇】

文章目录 1. 简介2. 设计模式的分类2.1 创建型模式&#xff08;Creational Patterns&#xff09;&#xff1a;2.2 结构型模式&#xff08;Structural Patterns&#xff09;&#xff1a;2.3 行为型模式&#xff08;Behavioral Patterns&#xff09;&#xff1a; 3. 使用设计模式…
阅读更多...
项目实战--网页五子棋（游戏大厅）(3)

项目实战--网页五子棋（游戏大厅）(3)

我们的游戏大厅界面主要需要包含两个功能&#xff0c;一是显示用户信息&#xff0c;二是匹配游戏按钮 1. 页面实现 hall.html <!DOCTYPE html> <html lang"ch"> <head><meta charset"UTF-8"><meta name"viewport"…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023