有一个需求是给一个视频增加遮罩 我研究了下 抽象出来就是给一个div增加遮罩

原理是：最外层的div使用relative定位     然后里面放两个子div  一个是不被遮的  另一个是遮罩（用absolute定位），最后用js控制显示状态的变化

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>

<style>

   .warp{

    absolute:relative;

   }

.main{

width:800px;

height:800px;

border:1px solid #cccccc;

color:red;

font-size: 22px;

}

.filter{

width:800px;

height:800px;

background-color:black;

position:absolute;

left:0;

top:0;

filter:

                opacity:0.5;/*其他，透明度50%*/

                z-index:99;

               display:none;

}

.close{

font-size: 22px;

color:red;

margin:50px auto;

}

</style>

</head>

<body>

<div class="warp">

<div class="main">

<div class="test" onclick="Filter();">弹出遮罩</div>

</div>

<div id="filter" class="filter">

   <div class="close" onclick="Close();">关闭</div>

</div>

</div>

<script>

var filter=document.getElementById("filter")

function Filter(){

filter.style.display="block";

}

function Close(){

filter.style.display="none";

}

</script>

</body>

</html>

　　

在一个div上增加遮罩的更多相关文章

  1. WinForm特效:桌面上的遮罩层

    一个窗体特效,帮你了解几个windows api函数.效果:windows桌面上增加一个简单的遮罩层,其中WS_EX_TRANSPARENT 比较重要,它实现了鼠标穿透的功能. using Syste ...

  2. web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

    https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开   <style typ ...

  3. Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。

    Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法EDIT Object.defineProperty(obj, ...

  4. 如何在一个页面上让多个jQuery

    如何在一个页面上让多个jQuery共存呢?比如jquery-1.5和jquery-1.11. 你可能会问,为什么需要在一个页面上让多个jQuery共存?直接引用最新版本的jQuery不行吗? 答案是, ...

  5. ZeroMQ接口函数之 ：zmq_send – 在一个socket上发送一个消息帧

    ZeroMQ 官方地址 :http://api.zeromq.org/4-1:zmq-send zmq_send(3)              ØMQ Manual - ØMQ/4.1.0 Name ...

  6. AIX上增加逻辑卷时报错误0516-787 extendlv: Maximum allocation for logical volume

    AIX上增加逻辑卷时报错误0516-787 extendlv: Maximum allocation for logical volume jdelv02 is 512. 在往aix使用chfs -a ...

  7. 如何在一个div标签里显示出另一个网页？ <iframe src=" http://www.baidu.com " width="800px" height="200px" scrolling="no" frameborder="0"> </iframe>

    如何在一个div标签里显示出另一个网页? 用在div里用iframe,就像下面的代码 <iframe src=" http://www.baidu.com " width=& ...

  8. FOR ALL ENTRIES IN 与 INNER JOIN 写在一个SQL上影响效率

    SELECT likp~vbeln likp~lfart lips~werks likp~kunnr INTO CORRESPONDING FIELDS OF TABLE it_likps FROM ...

  9. Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法

    Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法 最近在适用Ext JS4开发 ...

随机推荐

  1. C++中让人忽视的左值和右值

    前言 为了了解C++11的新特性右值引用,不得不重新认识一下左右值.学习之初,最快的理解,莫过于望文生义了,右值那就是赋值号右边的值,左值就是赋值号左边的值.在中学的数学的学习中,我们理解的是,左值等 ...

  2. 错误 warning: LF will be replaced by CRLF in README.md.

    问题类型 windows中的换行符为 CRLF, 而在Linux下的换行符为LF,所以在执行add . 时出现提示:warning: LF will be replaced by CRLF in RE ...

  3. spring自动注入的三种方式

    所谓spring自动注入,是指容器中的一个组件中需要用到另一个组件(例如聚合关系)时,依靠spring容器创建对象,而不是手动创建,主要有三种方式: 1. @Autowired注解——由spring提 ...

  4. Eclipse设置控制台日志输出位置

    1.选择服务器配置 2.设置输出文件路径

  5. TensorFlow学习笔记10-卷积网络

    卷积网络 卷积神经网络(Convolutional Neural Network,CNN)专门处理具有类似网格结构的数据的神经网络.如: 时间序列数据(在时间轴上有规律地采样形成的一维网格): 图像数 ...

  6. 第五周总结&第三次实验报告

    实验三 String类的应用 实验目的 掌握类String类的使用: 学会使用JDK帮助文档: 实验内容 1.已知字符串:"this is a test of java".按要求执 ...

  7. 版本控制工具 GIT 简要教程

    一,Git 简介 其实这个就不用说了 但是国际惯例还是介绍一下吧; Git 是一个开源的分布式版本控制系统,用于敏捷 高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助 ...

  8. Windows 10更新后无法启动Dolby音频驱动程序

    在电脑更新Windows 10 1903版本后,重启出现如下问题: 经查,这与驱动强制签名有关.解决方法如下: 打开"设置"->"更新与安全"->& ...

  9. [Python3] 013 集合：你不能两次进入同一个集合

    目录 0. 集合的独白 1. 集合的创建 2. 集合的特性 (1) 概述 (2) 少废话,上例子 3. 集合的遍历 4. 集合内涵 5. 集合的内置方法 6. 可供集合使用的一些方法/函数 (1) 又 ...

  10. js获取指定字符后面的字符

    function getCaption(obj){ var index=obj.lastIndexOf("\-"); obj=obj.substring(index+1,obj.l ...