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.pswp.cn/web/66502.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/66502.shtml
英文地址，請注明出處：http://en.pswp.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