地图下面的效果是css的遮罩实现的代码如下

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
	.mask {
						width: 100%;
						height: 80%;
						position: absolute;
						top: 0;
						background: linear-gradient(to bottom,
								rgba(22, 21, 21, 0),
								rgba(255, 255, 255, 1));

mask 是相对于父元素的一个子元素，父元素要添加加relative定位，

background：linar-gradient是控制线性渐变的一个属性，而css3的rgba让这个属性如虎添翼
关于这俩个东西可以在mdn介绍文档上看一下，很详细！！！！

推荐一些遮罩层的效果展示https://blog.csdn.net/xygg0801/article/details/69668973?ops_request_misc=&request_id=&biz_id=102&utm_term=css%E9%81%AE%E7%BD%A9%E5%B1%82&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-5-.pc_search_result_control_group&spm=1018.2226.3001.4187