Python 官方文档:入门教程 => 点击学习
通常我们使用CSS控制颜色时,均采用16进制的RGB模式,如 color:#ff0000; 这边先介绍一下几种色彩模式及取值规则 HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相
通常我们使用CSS控制颜色时,均采用16进制的RGB模式,如 color:#ff0000;
这边先介绍一下几种色彩模式及取值规则
HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色调,饱和度,亮度三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
HSLA是在HSL的基础上增加一个透明度(A)的设置。
RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
RGBA在RGB的基础上多了控制alpha透明度的参数
- <style type="text/css">
- <!--
- .colors { padding:20px; display:block; position:relative; text-align:center; }
- .b-bg { background-color:black; }
- .w-bg { background-color:white; }
- .colors p { font-weight:bold; color:#f00; margin:15px; padding:10px; display:block; clear:both; }
- .colors .color-hsl { background-color:hsl(240,100%,50%); }
- .colors .color-hsla { background-color:hsla(0,100%,50%,0.2); }
- .colors .color-rgba { background-color:rgba(67,180,254,0.5); }
- .colors .color-opacity { background-color:#0d0; opacity:0.6; }
- -->
- </style>
- <div class="colors b-bg">
- <div class="color-hsl"><p>HSL Color Example</p></div>
- <div class="color-hsla"><p>HSLA Color Example</p></div>
- <div class="color-rgba"><p>RGBA Color Example</p></div>
- <div class="color-opacity"><p>Opacity Example</p></div>
- </div>
- <div class="colors w-bg">
- <div class="color-hsl"><p>HSL Color Example</p></div>
- <div class="color-hsla"><p>HSLA Color Example</p></div>
- <div class="color-rgba"><p>RGBA Color Example</p></div>
- <div class="color-opacity"><p>Opacity Example</p></div>
- </div>
效果图
对比黑白背景,即可发现不同透明度的差别。另外一个需要注意的就是 opacity是表示整个层的透明度 :-)
--结束END--
本文标题: CSS3 Color属性介绍
本文链接: https://www.lsjlt.com/news/183526.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-03-01
2024-03-01
2024-03-01
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0