有这样一个需求，给一个地图实现半透明效果。
使用css滤镜属性可以实现：filter。
下面是属性的所以值
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#filter {
float: left;
height: 500px;
width: 500px;
background: red;
-webkit-filter: grayscale(30%);
/* Chrome, Safari, Opera */
filter: grayscale(30%);
} #filter02 {
float: left;
height: 500px;
width: 500px;
background: red;
-webkit-filter: opacity(30%);
/* Chrome, Safari, Opera */
filter: opacity(30%);
}
/*所以css语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();*/
</style>
</head> <body>
<div id="filter"></div>
<div id="filter02"></div>
</body> </html>
实现半透明的两种方式
rgba(0,0,0,.45) opacity: .45;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#rgba01{
float: left;
height: 500px;
width: 500px;
background: rgba(0,0,0,.45);
} #rgba02{
float: left;
height: 500px;
width: 500px;
background: #000000;
opacity: .45;
}
</style>
</head>
<body>
<div id="rgba01"></div>
<div id="rgba02"></div>
</body>
</html>
