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，一经查实，立即删除！

相关文章

C# 实现系统信息监控与获取全解析

C# 实现系统信息监控与获取全解析

在 C# 开发的众多应用场景中&#xff0c;获取系统信息以及监控用户操作有着广泛的用途。比如在系统性能优化工具中&#xff0c;需要实时读取 CPU、GPU 资源信息&#xff1b;在一些特殊的输入记录程序里&#xff0c;可能会涉及到键盘监控&#xff1b;而在图形界面开发中&#xf…
阅读更多...
使用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进行访问。设计这个原则的原…
阅读更多...
Python Web应用开发入门：从零搭建一个简单的Web应用

Python Web应用开发入门：从零搭建一个简单的Web应用

引言 在当今的互联网时代，Web应用已经成为我们日常生活中不可或缺的一部分。无论是社交媒体、电子商务，还是在线教育，Web应用都在背后发挥着重要作用。Python作为一种简洁、强大的编程语言，在Web开发领域也有着广泛的应用。本文将带你从零开始，使用Python搭建一个简单的W…
阅读更多...
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;拼…
阅读更多...
第15章：Python TDD应对货币类开发变化（二）

第15章：Python TDD应对货币类开发变化（二）

写在前面 这本书是我们老板推荐过的&#xff0c;我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后&#xff0c;我突然思考&#xff0c;对于测试开发工程师来说&#xff0c;什么才更有价值呢&#xff1f;如何让 AI 工具更好地辅助自己写代码&#xff0c;或许…
阅读更多...
CSS 动画相关属性

CSS 动画相关属性

定义和用法 一些 CSS 属性可用于动画制作&#xff0c;这意味着它们可用于过渡等效果中。 可设置动画的属性可以从一个值逐渐更改为另一个值&#xff0c;例如尺寸、数字、百分比和颜色。 浏览器支持 表格中的数字注明了完全支持 CSS 动画的首个浏览器版本。 -webkit-、-moz…
阅读更多...
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;其中一家银行正在开发…
阅读更多...
《探索烟雾目标检测开源项目：技术与应用的深度剖析》

《探索烟雾目标检测开源项目：技术与应用的深度剖析》

一、引言 在现代社会&#xff0c;火灾犹如高悬的达摩克利斯之剑&#xff0c;时刻威胁着人们的生命财产安全。烟雾&#xff0c;作为火灾发生的重要征兆&#xff0c;其及时、准确的检测对于火灾预防和控制起着举足轻重的作用。烟雾目标检测技术犹如敏锐的 “电子哨兵”&#xff…
阅读更多...
Linux操作系统的灵魂，深度解析MMU内存管理

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

在计算机的奇妙世界里&#xff0c;我们每天使用的操作系统看似流畅自如地运行着各类程序&#xff0c;背后实则有着一位默默耕耘的 “幕后英雄”—— 内存管理单元&#xff08;MMU&#xff09;。它虽不常被大众所熟知&#xff0c;却掌控着计算机内存的关键命脉&#xff0c;是保障…
阅读更多...
3.2 OpenAI 语言模型总览：GPT 系列的演进与应用解析

3.2 OpenAI 语言模型总览：GPT 系列的演进与应用解析

OpenAI 语言模型总览：GPT 系列的演进与应用解析 OpenAI 的语言模型，特别是 GPT（Generative Pre-trained Transformer）系列，代表了当前自然语言处理（NLP）技术的前沿。自从推出以来，这些模型不断推进了文本生成、理解和交互的能力，成为了多个应用场景中的核心技术。本文…
阅读更多...
【云岚到家】-day02-客户管理-认证授权

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

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

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

1. 接口去掉 Controller 问题: 正确的路径应该是/api/login/register, 这块controller有没有地方配置的? 2. 自定义成功,错误消息有没有办法? 未完成, 待更新
阅读更多...
2024春秋杯密码题第一、二天WP

2024春秋杯密码题第一、二天WP

你是小哈斯? 题目内容&#xff1a; 年轻黑客小符参加CTF大赛&#xff0c;他发现这个小哈斯文件的内容存在高度规律性&#xff0c;并且文件名中有隐藏信息&#xff0c;他成功找到了隐藏的信息&#xff0c;并破解了挑战。得意地说&#xff1a;“成功在于探索与质疑&#xff0c…
阅读更多...
opencv对直方图的计算和绘制

opencv对直方图的计算和绘制

【欢迎关注编码小哥&#xff0c;学习更多实用的编程方法和技巧】 1、直方图的计算 cv::calcHist 是 OpenCV 中用于计算图像直方图的函数。它可以处理多通道图像&#xff0c;并通过指定图像、通道、掩膜、直方图大小和范围等参数来生成直方图。 函数原型 void cv::calcHist(…
阅读更多...
C++的auto_ptr智能指针：从诞生到被弃用的历程

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

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

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

目录 前言一、工厂模式二、单例模式三、观察者模式观察者模式的优势 四、状态模式状态模式的优势 五、策略模式策略模式的优势策略模式与状态模式有什么区别呢? 六、组合模式七、命令模式八、装饰器模式 前言 本文介绍了游戏开发中常用的设计模式&#xff0c;如工厂模式用于创…
阅读更多...
C++并发编程之异常安全性增强

C++并发编程之异常安全性增强

在并发编程中&#xff0c;异常安全是一个非常重要的方面&#xff0c;因为并发环境下的错误处理比单线程环境更加复杂。当多个线程同时执行时&#xff0c;异常不仅可能影响当前线程&#xff0c;还可能影响其他线程和整个程序的稳定性。以下是一些增强并发程序异常安全性的方法&a…
阅读更多...
最新文章

Copyright @ 2022~2023