方法:1、使用RGBA()函數,使用紅、綠、藍、透明度的疊加來產生各式各樣的顏色,語法「rgba(紅,綠,藍,透明度)」;2 、使用HSLA()函數,使用色相、飽和度、亮度、透明度來定義顏色,語法「hsla(色相,飽和度,亮度,透明度)」。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
方法1:使用RGBA()函數
rgba() 函數使用紅色(R)、綠色(G)、藍色(B)、透明度(A)的疊加來產生各式各樣的顏色。
語法:
rgba(red, green, blue, alpha)
屬性值:
#值 | ##描述|
---|---|
red | 定義紅色值,取值範圍為0 ~ 255,也可以使用百分比0% ~ 100%。|
green | 定義綠色值,取值範圍為 0 ~ 255,也可以使用百分比 0% ~ 100%。|
blue | 定義藍色值,取值範圍為 0 ~ 255,也可以使用百分比 0% ~ 100%。|
alpha - 透明度 | 定義透明度0(完全透明) ~ 1(完全不透明)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #p1 {background-color:rgb(255,0,0,0.3);} #p2 {background-color:rgb(0,255,0,0.3);} #p3 {background-color:rgb(0,0,255,0.3);} #p4 {background-color:rgb(192,192,192,0.3);} #p5 {background-color:rgb(255,255,0,0.3);} #p6 {background-color:rgb(255,0,255,0.3);} </style> </head> <body> <p>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>效果圖:
#方法2:使用HSLA()函數
hsla() 函數使用色相、飽和度、亮度、透明度來定義顏色。 HSLA 即色相、飽和度、亮度、透明度(英文:Hue, Saturation, Lightness, Alpha )。- 色相(H)是色彩的基本屬性,就是平常所說的顏色名稱,如紅色、黃色等。
- 飽和度(S)是指色彩的純度,越高色彩越純,低則逐漸變灰,取 0-100% 的數值。
- 亮度(L) 取 0-100%,增加亮度,顏色會向白色變化;減少亮度,顏色會向黑色變化。
- 透明度(A) 取值 0~1 之間, 代表透明度。
hsla(hue, saturation, lightness, alpha)屬性值:
描述 | |
---|---|
hue - 色相 | 定義色相(0 到360) - 0 (或360) 為紅色, 120 為綠色, 240 為藍色|
saturation - 飽和度 | 定義飽和度; 0% 為灰色,100% 全色|
lightness - 亮度 | 定義亮度0% 為暗, 50% 為普通, 100% 為白|
alpha - 透明度 | 定義透明度0(透完全明) ~ 1(完全不透明)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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> <p>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>效果圖:
css影片教學)
以上是css怎麼設定透明度的顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章!

在本週的綜述中:Firefox獲得了類似鎖匠的力量,三星的Galaxy Store開始支持Progressive Web Apps,CSS Subgrid正在Firefox發貨

在本週的綜述中:Internet Explorer進入Edge,Google搜索控制台吹捧新的速度報告,而Firefox給出了Facebook&#039; s Notification

蓋茨比(Gatsby)進行了出色的處理和處理圖像。例如,它可以幫助您節省圖像優化的時間,因為您不必手動


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Dreamweaver CS6
視覺化網頁開發工具

SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。