透明背景和遮罩层

1 <div class="searchBlock">
2       <div class="center1_filter"></div>
3       <div class="field"></div>
4 </div>
1 .searchBlock{width: 800px;height:120px;position: absolute;top:50%;left: 50%;margin-top: -97px;margin-left: -400px;padding: 15px 19px;}
2 .center1_filter{width: 100%;height: 100%;position: absolute;top:0;left: 0;background-color: #000;filter:alpha(opacity=50);-moz-opacity:0.5;-webkit-opacity: 0.5;-o-opacity: 0.5;-ms-opacity: 0.5;opacity: 0.5;z-index: -1;}

遮罩层与透明背景类似,只是不要写z-index: -1;

时间: 2024-10-05 14:32:57

透明背景和遮罩层的相关文章

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,但是天公不作美,公司需要让我自己开发个图片放大的插件 但公司老大的话,犹如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人只能瞎研究了,幸好黑天不负屌丝人,本屌丝终于搞出来了,虽然不尽善尽美,但是功能还是可以用的啦 先附上源码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg&q

点击弹出居中带有透明遮罩层窗口

点击弹出居中带有透明遮罩层窗口:本章节介绍一下如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,此效果在当下比较流行,当然还有更为复杂的实现方式,当然效果也更为绚丽,下面介绍的代码能够简单实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="htt

使用CSS3的box-shadow实现双透明遮罩层对话框

box-shadow介绍 在我之前的一篇文章<从天猫和支付宝身上学习opcity与rgba>中,介绍了实现双透明遮罩层效果的两种方法,分别是opacity和rgba.他们需要分别依赖于不同的html结构. 例如用opacity方法:点我查看DEMO. 我一度认为实现这种双遮罩层的效果必须需要借助background,事实上利用CSS3的box-shadow属性可以轻松模拟出这种效果.再次查看Demo. box-shadow: 0 0 0 20px rgba(0, 0 ,0 ,0.5); 五个参

点击弹出居中的遮罩层,背景变暗

点击弹出层特效代码,网页上已经有很多类似的代码了,使用挺广泛的,代码先判断浏览器的版本,ie6创建的div样式和非ie6创建的div样式在解析时有点区别,为了兼容性考虑,才加了判断,虽然实现的有点粗糙,不过从实现的方法来说,容易理解,便于修改完善. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

前端小demo——遮罩层逐渐变透明

点击按钮触发事件使遮罩层逐渐变透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img { width: 430px; height: 280px; } div { width: 1600px; height: 300px; background

Winform应用程序实现通用遮罩层二

之前先后发表过:<Winform应用程序实现通用遮罩层>.<Winform应用程序实现通用消息窗口>,这两款遮罩层其实都是基于弹出窗口的,今天为大家分享一个比较简单但界面相对友好的另一种实现方案,废话不多说,直接进入主题. 一.实现思路(解决问题顺序): 透明遮罩: 1.实现可设置透明的Panel控件(MaskPanel): 2.Panel控件(MaskPanel)能够覆盖父容器(一般是当前窗体form对象)客户区区域(即:与父容器客户区区域大小相同),并处于最上层,保证父容器上的

在浏览器窗口上添加一个遮罩层

背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着很大的局限性,主要是它们的展现UI一来很不美观,二来也不够灵活,因此,我们经常需要自行定义弹窗函数. 当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹窗时,页面其它地方不可点击),通常的做法是用一个div将整个页面窗口遮挡住. 实现 下面,我们一步步地实现一种较为简洁有效的遮罩层: Step 1:

js遮罩层以及移动端的上拉框

今天发一个之前写的移动端的项目,主要是讲一下遮罩层的应用,以及顺带提一下移动开发的一些事情.首先按钮点击弹出遮罩层这个大家很熟悉了,这里还是给大家提供一份代码,跟通用的没太大区别,主要讲一下方法: $(function(){ var jiage=$(".jiage"),xingji=$(".xingji"),fj=$(".fj li"),qd=$(".qd");jiage.click(function(){tanchu();x