csc_滤镜filter和实现透明的两种方式

有这样一个需求，给一个地图实现半透明效果。

使用css滤镜属性可以实现：filter。

下面是属性的所以值

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             #filter {
 9                 float: left;
10                 height: 500px;
11                  500px;
12                 background: red;
13                 -webkit-filter: grayscale(30%);
14                 /* Chrome, Safari, Opera */
15                 filter: grayscale(30%);
16             }
17             
18             #filter02 {
19                 float: left;
20                 height: 500px;
21                  500px;
22                 background: red;
23                 -webkit-filter: opacity(30%);
24                 /* Chrome, Safari, Opera */
25                 filter: opacity(30%);
26             }
27             /*所以css语法
28             filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();*/
29         </style>
30     </head>
31 
32     <body>
33         <div id="filter"></div>
34         <div id="filter02"></div>
35     </body>
36 
37 </html>

View Code

实现半透明的两种方式
rgba(0,0,0,.45)

opacity: .45;

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #rgba01{
 8                 float: left;
 9                 height: 500px;
10                  500px;
11                 background: rgba(0,0,0,.45);
12             }
13             
14             #rgba02{
15                 float: left;
16                 height: 500px;
17                  500px;
18                 background: #000000;
19                 opacity: .45;
20             }
21         </style>
22     </head>
23     <body>
24         <div id="rgba01"></div>
25         <div id="rgba02"></div>
26     </body>
27 </html>

View Code