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>