【CSS3】颜色表示方式

最新推荐文章于 2025-05-16 18:51:16 发布

weixin_30569001

最新推荐文章于 2025-05-16 18:51:16 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiongjiawei/p/6752224.html

本文详细介绍了使用CSS设置背景颜色的方法，包括使用十六进制、RGB、RGBA、HSL及HSLA等不同格式的颜色表示方式，并展示了具体的样式应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>    
 6     <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
 7     <style type="text/css">
 8         body{background: url(img/花1.jpg);}
 9         div{width: 100%;height: 50px}
10         #div1{background: #0f0}
11         #div2{background: rgb(255,0,0);}
12         #div3{background: rgb(0%,0%,100%);}
13         #div4{background: rgba(255,0,0,0.5);}
14         #div5{background: hsla(120,50%,50%,1);}
15     </style>
16     <!--16进制表示颜色时两两相同时可只写一位-->
17     <!--HSL模式：H表示色调(0或360表示红色，120表示绿色，240表示蓝色，取值范围0-360)；S表示饱和度，取值范围0.0%-100.0%；L表示亮度，取值范围0.0%-100.0%；
18     HSLA在HSL模式上加了Alpha透明度，类似RGB和RBGA-->
19 </head>
20 <body>
21     <div id="div1"></div>
22     <div id="div2"></div>
23     <div id="div3"></div>
24     <div id="div4"></div>
25     <div id="div5"></div>
26 </body>
27 </html>