请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

[HTML5] 好程序员web前端培训分享CSS学习:HSLA颜色模式

[复制链接]
叶子老师 发表于 2019-5-16 16:36:32 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
好程序员web前端培训分享CSS学习:HSLA颜色模式
一、理论:
1.HSLA颜色模式
a.HSLA在HSL基础上增加了不透明度,值越大透明度越低
b.HSLA颜色模式的浏览器兼容性和HSL一样,只有较新版本的主流浏览器才支持
2.RGBA和HSLA颜色模式二者可以完全相互替换
3.RGBA/HSLA的IE兼容方案
a.在IE8以下版本,一般在前面设置一个非透明色,在其后紧跟一个RGBA/HSLA颜色模式
b.将透明的PNG图片平铺做为背景图片,适用于ie7-8
c.使用Gradient滤镜可以指定半透明颜色,将起止色设置为同一种颜色即可避免产生渐变

二、实践:
1.
1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>Title</title>  
6.     <style type="text/css">  
7.         .row{  
8.             overflow: hidden;  
9.         }  
10.         .row div{  
11.             width: 80px;  
12.             height: 80px;  
13.             line-height: 80px;  
14.             text-align: center;  
15.             float:left;  
16.         }  
17.         .row:nth-of-type(1) div {  
18.             background: hsla(183,50%,50%,1);  
19.         }  
20.         .row:nth-of-type(2) div {  
21.             background: hsla(133,50%,50%,.8);  
22.         }  
23.         .row:nth-of-type(3) div {  
24.             background:  hsla(133,50%,50%,.6);  
25.         }  
26.         .row:nth-of-type(4) div{  
27.             background: hsla(133,50%,50%,.4);  
28.         }  
29.         .row div:nth-child(1){  
30.             background: hsla(133,50%,50%,.2);  
31.         }  
32.         .row div:nth-child(2){  
33.             background: hsla(133,50%,50%,.1);  
34.         }  
35.         .row div:nth-child(3){  
36.             background: hsla(133,50%,50%,.2);  
37.         }  
38.         .row div:nth-child(4){  
39.             background: hsla(133,50%,50%,.3);  
40.         }  
41.         .row div:nth-child(5){  
42.             background: hsla(133,50%,50%,.4);  
43.         }  
44.         .row div:nth-child(6){  
45.             background: hsla(133,50%,50%,.5);  
46.         }  
47.         .row div:nth-of-type(1) div {  
48.             background: hsla(133,50%,50%,.6);  
49.         }  
50.     </style>  
51. </head>  
52. <body>  
53. <div class="demo">  
54.     <div class="row">  
55.         <div>  
56.             1  
57.         </div>  
58.         <div>  
59.             0.8  
60.         </div>  
61.         <div>  
62.             0.6  
63.         </div>  
64.         <div>  
65.             0.4  
66.         </div>  
67.         <div>  
68.             0.2  
69.         </div>  
70.     </div>  
71.     <div class="row">  
72.         <div>  
73.             1  
74.         </div>  
75.         <div>  
76.             0.8  
77.         </div>  
78.         <div>  
79.             0.6  
80.         </div>  
81.         <div>  
82.             0.4  
83.         </div>  
84.         <div>  
85.             0.2  
86.         </div>  
87.     </div>  
88.     <div class="row">  
89.         <div>  
90.             1  
91.         </div>  
92.         <div>  
93.             0.8  
94.         </div>  
95.         <div>  
96.             0.6  
97.         </div>  
98.         <div>  
99.             0.4  
100.         </div>  
101.         <div>  
102.             0.2  
103.         </div>  
104.     </div>  
105.     <div class="row">  
106.         <div>  
107.             1  
108.         </div>  
109.         <div>  
110.             0.8  
111.         </div>  
112.         <div>  
113.             0.6  
114.         </div>  
115.         <div>  
116.             0.4  
117.         </div>  
118.         <div>  
119.             0.2  
120.         </div>  
121.     </div>  
122.     <div class="row">  
123.         <div>  
124.             1  
125.         </div>  
126.         <div>  
127.             0.8  
128.         </div>  
129.         <div>  
130.             0.6  
131.         </div>  
132.         <div>  
133.             0.4  
134.         </div>  
135.         <div>  
136.             0.2  
137.         </div>  
138.     </div>  
139. </div>  
140.   
141. </body>  
142.</html>  
好程序员web前端培训官网:http://www.goodprogrammer.org/html5_class.shtml

精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启