蒙层

利用z-index:

.mui-backdrop-other {
position: fixed;
top: 44px;
right:;
bottom:;
left:;
z-index:;
background-color: rgba(0, 0, 0, .3);
}

利用伪元素做蒙层:

.element {
position: relative;
} .element:after {
content: "哈哈哈,我是遮罩";
position: absolute;
top:;
left:;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 100px;
background-color: rgba(0, 0, 0, .6);
color: #fff;
text-align: center;
}

css 蒙层的更多相关文章

  1. css蒙层

    {   -webkit-filter: grayscale(100%);   -moz-filter: grayscale(100%);   -ms-filter: grayscale(100%); ...

  2. web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动

    场景概述 弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这 ...

  3. css-dialog样式实现弹框蒙层全屏无需JS计算高度兼容IE7

    <!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title> ...

  4. web移动开发中如何实现图标点击态的蒙层效果

    webapp开发中经常需要加入点击二态,即用户点击(tap)页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作,这样能够带来更好的用户体验,今天我们要讨论的是如何给图标加上点击的二态效果. ...

  5. 设置 tableview 的背景颜色,总是有蒙层

    1.给tableview添加了背景图片后, cell 总是有一层蒙层蒙着,很阴暗. 2.实验以后才发现背景图片被放在了 cell 的后面.

  6. div+css遮罩层

    曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...

  7. CSS遮罩层的实现

    偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了.所以决定还是把它记下来吧. 直接上代码吧. 第一步,html代码: ...

  8. iOS开发之实现半透明蒙层背景效果[用于下拉菜单页和分享页]

    郝萌主倾心贡献.尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助.欢迎给作者捐赠.支持郝萌主,捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...

  9. appium-在页面点击一下处理(一般处理提示蒙层)

    在写用例的时候,经常会发现某些第一次进去的页面会有一个蒙层提示.我们只有处理掉这个蒙层,才能继续我们的用例: 这边我们使用的是TouchAction的tap方法 TouchAction action ...

随机推荐

  1. 关于标准的知识 GB ISO 等内容

    1. 来自百度知道: GB:GB 即"国标"的汉语拼音缩写,为中华人民共和国国家标准的意思. ISO:国际标准化组织的英语简称.其全称是International Organiza ...

  2. 单个源文件下CmakeList.txt

    单个源文件下CmakeList.txt 1. main.c代码 & CmakeLists.txt 文件内容 在任意自己选定的目录下(t1/)编写main.c 与 CmakeLists.txt ...

  3. CentOS7安装Jenkins自动化部署maven项目

    前言: 最近要弄一个jenkins工具,已经安装好了并且jenkins使用部署项目的流程已经基本走通,上图: 话不多说,开始 第一步:安装jenkins: [ 准备环境: 在centOS7环境上:安装 ...

  4. vs2012密钥

    Microsoft Visual Studio Ultimate 2012 旗舰版 有效注册密钥:YKCW6-BPFPF-BT8C9-7DCTH-QXGWC:KCW6-BPFPF-BT8C9-7DCT ...

  5. linux之ssh互信

    1.如果你是之作root用户互信的话,直接一路执行如下命令就行. 1.切换你需要互信的账户 su hadoop1 2.执行命令,一路回车即可(在当前用的宿主用户目录下的.ssh目录下生成公钥和秘钥id ...

  6. web service 异常

    1.org/apache/commons/discovery/tools/DiscoverSingleton Exception in thread "main" java.lan ...

  7. vue element-ui 绑定@keyup事件无效

    解决办法: <el-input @keyup.native="ajax"></el-input> 加上.native覆盖原有封装的keyup事件即可

  8. LeetCode & Online Programming Learning Platform

    leetcode LeetCode is the best platform to help you enhance your skills, expand your knowledge and pr ...

  9. web攻擊

    一.dos攻擊 向服務器發送數量龐大的合法數據,讓服務器分不清是不是正常請求,導致服務器接收所有的請求.海量的數據請求會使得服務器停止服務和拒絕服務. 防禦:阿里云或其它資源服務器有專門web應用防火 ...

  10. Lodop扁宽横向241mm*93mm这种怪异的纸张如何设置

    Lodop中如果设置LODOP.SET_PRINT_PAGESIZE(2,'241mm','93mm','');,会发现实际的纸张和自己设置的不同,不只是打印机不识别,xps和pdf虚拟打印机也不能正 ...