有这样一个需求，给一个地图实现半透明效果。
使用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>
实现半透明的两种方式
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>