“HTML RGB 和 RGBA 颜色”的版本间差异
(创建页面,内容为“Category:HTML教程 {{ColorPicker}}”) |
无编辑摘要 |
||
第1行: | 第1行: | ||
[[Category:HTML教程]] | [[Category:HTML教程]] | ||
RGB 颜色值表示红色、绿色和蓝色光源。 | |||
RGBA 颜色值是具有 Alpha 通道(不透明度)的 RGB 扩展。 | |||
== RGB 颜色值 == | |||
在 HTML 中,可以使用以下公式将颜色指定为 RGB 值: | |||
RGB(红、 绿、蓝) | |||
参数(红色、绿色和蓝色)定义颜色的强度,其值介于 0 和 255 之间。 | |||
这意味着有 256 x 256 x 256 = 16777216 种可能的颜色! | |||
例如,rgb(255, 0, 0) 显示为红色,因为红色设置为其最高值 (255),而其他两个(绿色和蓝色)设置为 0。 | |||
另一个例子,rgb(0, 255, 0) 显示为绿色,因为绿色设置为其最高值 (255),而其他两个(红色和蓝色)设置为 0。 | |||
要显示黑色,请将所有颜色参数设置为 0,如下所示:rgb(0, 0, 0)。 | |||
要显示白色,请将所有颜色参数设置为 255,如下所示:rgb(255, 255, 255)。 | |||
{{ColorPicker}} | |||
<sample title="" desc="" hererun="s1"> | |||
<!DOCTYPE html> | |||
<html> | |||
<body> | |||
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1> | |||
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1> | |||
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1> | |||
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1> | |||
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1> | |||
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1> | |||
</body> | |||
</html> | |||
</sample> | |||
=== 灰色 === | |||
灰色阴影通常使用所有三个参数的相等值来定义: | |||
<sample title="" desc="" hererun="s2"> | |||
<!DOCTYPE html> | |||
<html> | |||
<body> | |||
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1> | |||
<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1> | |||
<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1> | |||
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1> | |||
<h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1> | |||
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1> | |||
</body> | |||
</html> | |||
</sample> | |||
== RGBA 颜色值 == | |||
RGBA 颜色值是具有 Alpha 通道的 RGB 颜色值的扩展 - 它指定颜色的不透明度。 | |||
RGBA 颜色值通过以下方式指定:rgba(红、 绿、蓝、阿尔法) | |||
alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的数字 | |||
<sample title="" desc="" hererun="s4"> | |||
<!DOCTYPE html> | |||
<html> | |||
<body> | |||
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1> | |||
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1> | |||
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1> | |||
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1> | |||
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1> | |||
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1> | |||
</body> | |||
</html> | |||
</sample> | |||
可以尝试改变下面的color picker中的alpha试试效果。 | |||
{{ColorPicker}} | {{ColorPicker}} |
2022年8月4日 (四) 11:07的版本
RGB 颜色值表示红色、绿色和蓝色光源。
RGBA 颜色值是具有 Alpha 通道(不透明度)的 RGB 扩展。
RGB 颜色值
在 HTML 中,可以使用以下公式将颜色指定为 RGB 值:
RGB(红、 绿、蓝)
参数(红色、绿色和蓝色)定义颜色的强度,其值介于 0 和 255 之间。
这意味着有 256 x 256 x 256 = 16777216 种可能的颜色!
例如,rgb(255, 0, 0) 显示为红色,因为红色设置为其最高值 (255),而其他两个(绿色和蓝色)设置为 0。
另一个例子,rgb(0, 255, 0) 显示为绿色,因为绿色设置为其最高值 (255),而其他两个(红色和蓝色)设置为 0。
要显示黑色,请将所有颜色参数设置为 0,如下所示:rgb(0, 0, 0)。
要显示白色,请将所有颜色参数设置为 255,如下所示:rgb(255, 255, 255)。
Color Picker
这个color picker使用xiaokaike/vue-color 实现。可以拖动和输入改变颜色值, 可以查看对应的十六进制颜色,RGB,RGBA, HSLA颜色。
Hex:{{colors.hex}}
RGBA:{{rgba}}
RGB:{{rgb}}
Hex:{{colors.hex}}
RGBA:{{rgba}}
RGB:{{rgb}}
示例
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
</body>
</html>
灰色
灰色阴影通常使用所有三个参数的相等值来定义:
示例
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1>
<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
</body>
</html>
RGBA 颜色值
RGBA 颜色值是具有 Alpha 通道的 RGB 颜色值的扩展 - 它指定颜色的不透明度。
RGBA 颜色值通过以下方式指定:rgba(红、 绿、蓝、阿尔法)
alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的数字
示例
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>
</body>
</html>
可以尝试改变下面的color picker中的alpha试试效果。
Color Picker
这个color picker使用xiaokaike/vue-color 实现。可以拖动和输入改变颜色值, 可以查看对应的十六进制颜色,RGB,RGBA, HSLA颜色。