Biegral Blog

前端如何实现遮罩功能

     web端中经常需要让局部区域可视，但不可点击。

这是可以通过遮罩功能实现。

     实现思路：

   在上面浮动增加一层div层将下层盖住，通过z-index实现。

实现代码：

index.html:

  <!-- 遮罩-->
			<div class="weatherShade"  ></div>
			<div class="weatherShade2"  ></div>			
			<div class="weatherShade3"  ></div>			
			<div class="weatherShade4"  ></div>			
			<div class="weatherShade5"  ></div>			

			<iframe id="MyIFrame" allowtransparency="true" style="width: 100%;
				background:#fff ;margin-top: 0px;height: 80px;color: #fff;"
				frameborder="0"   scrolling="no" src="http://tianqi.eastday.com/plugin/widget_v1.html?sc=1&z=1&t=0&v=0&d=3&bd=0&k=&f=&q=1&a=1&c=54511&w=385&h=96&align=center">
			
			
				
			</iframe>

index.css: