JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-4-25 02:03:29

背景描述

最近项目中要使用到地图有可能基于开源地图也有可能使用自己用geoserver搭建的地图服务器，在前端这块有个简单的需求，在地图上放置一个蒙层，起到一个初步美化效果。对于初入前端江湖不久的我，一时没有什么想法，可能基础要好好补补，添加上蒙层，这好处理，就是两个div重叠嘛，但是下面的地图还能点击、放大缩小等各种操作吗？

解决方法

想了许久，终于找到了解决方案，css有个属性，pointer-events，直接看官网介绍：

给出实现示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.main {
				width: 400px;
				height: 400px;
				border: 1px solid red;
			}
			
			.front {
				width: 350px;
				height: 350px;
				background-color: green;
				float: left;
				position: absolute;
				text-align: center;
				line-height: 300px;
				opacity: 0.6;
			}
			
			.back {
				width: 360px;
				height: 360px;
				background-color: rosybrown;
				text-align: center;
				line-height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="front">
				我在前面层
			</div>
			<div class="back">
				我在后面层
				<a href="https://www.css88.com/book/css/properties/user-interface/pointer-events.htm">点击我，我要飞</a>
			</div>
		</div>
	</body>

</html>

执行结果：

总结: css奇巧淫技很多，需要多多学习实践啊

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

css解决蒙层问题

背景描述

解决方法