資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會科學
時尚學
法學CSS3 的 RGBA、HSL 和 HSLA 顏色值
CSS3 支援 RGBA、HSL、HSLA 和其他顏色值。此外，還提供了 100 多種顏色名稱。
CSS3 RGBA
CSS3 RGBA 顏色值為紅色、綠色、藍色和阿爾法。阿爾法是顏色不透明度，即 0.0 到 1.0 之間的一個數字。這裡，1.0 表示完全不透明。這裡，我們可以看到使用 RGBA 中的阿爾法引數建立的不透明度的差異。
示例
現在讓我們看一個使用 RGBA 顏色值在網頁上設定背景顏色的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color:rgba(108,111,35,0.6);}
#demo2 {background-color:rgba(108,111,35,0.5);}
#demo3 {background-color:rgba(108,111,35,0.4);}
#demo4 {background-color:rgba(108,111,35,0.3);}
#demo5 {background-color:rgba(108,111,35,0.2);}
#demo6 {background-color:rgba(108,111,35,0.1);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>
CSS3 HSL
為元素設定顏色時，CSS3 和 HSL 用於色相、飽和度和亮度。色相值從 0 到 260，其中 0 或 360 表示紅色，240 表示藍色，而 120 表示綠色。飽和度和亮度是百分比值。
示例
現在讓我們看一個使用 HSL 顏色值在網頁上設定背景顏色的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsl(150, 100%, 50%);}
#demo2 {background-color: hsl(150, 100%, 50%);}
#demo3 {background-color: hsl(140, 100%, 40%);}
#demo4 {background-color: hsl(120, 100%, 40%);}
#demo5 {background-color: hsl(120, 100%, 30%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>
CSS3 HSLA
HSLA 顏色值用於色度、飽和度、明度和 Alpha。Alpha 是顏色的不透明度，即介於 0.0 和 1.0 之間的數字。其中，0.0 表示完全透明，而 1.0 表示完全不透明。
示例
現在讓我們看一個使用 HSLA 顏色值設定網頁背景顏色的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>
更新日期：31-Oct-2023
178 次瀏覽
廣告