CSS3实现遮罩层效果

第一步、创建外层遮罩

先写个大盒子

<div id="box"></div>

再把盒子设置为固定定位，top、right、bottom、left都设置为0，并且不要设置宽高，这样子就实现大盒子铺满整个屏幕了,在设置个半透明背景颜色

#box{position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(221, 221, 221, 0.5);
}

效果就是这样子的

然后在大盒子里面写个小盒子装你的内容

<div id="box"><div><a href="javascript:void(0);">关闭</a></div>
</div>

设置下小盒子的css属性

#box div{width: 30%;height: 300px;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);padding: 20px;background: #ffffff;border-radius: 10px;text-align: right;
}

再然后效果就是这样子的

这样子除了小盒子里面的内容外面的都是选不了的，再配合js控制遮罩层的显示与隐藏

实现鼠标穿透遮罩层，而不穿透内容

有时候需要实现鼠标能够对下层的内容进行操作的而遮罩层又不隐藏的情况，只需要给父元素加上：pointer-events: none;

然后在给遮罩层的小盒子加上pointer-events: auto;就可以实现效果了

最后代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box{position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(221, 221, 221, 0.5);pointer-events: none;}#box div{width: 30%;height: 300px;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);padding: 20px;background: #ffffff;border-radius: 10px;text-align: right;pointer-events: none;}</style></head><body><div id="box"><div><a href="javascript:void(0);">关闭</a></div></div></body>
</html>

CSS3实现遮罩层效果相关推荐

纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别、遮罩层效果、三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器兄弟选择器属性选择器伪类选择器其他伪类选择器类元素选择器直接选择器否定选择器伪元素 :after清除浮动 :before和:after 用来写小三角形首字母 ...
js ajax 点击遮罩层,jQuery弹出遮罩层效果完整示例
本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ...
CSS伪类实现遮罩层效果
CSS中的伪类可以更方便的帮助我们定义过渡效果,这里,我们详细介绍一下利用:hover实现遮罩层效果.:hover是指当鼠标悬停在元素上时所发生的效果. 实现遮罩层的步骤需要两个相等大小的元素. 两 ...
css3全屏遮罩层,css3 引导遮罩层
https://blog.csdn.net/tangtang5963/article/details/51276560 要实现遮罩层和部分区域高亮显示,这里的思路是应用了元素的border属性,将元素 ...
天地图添加遮罩层效果
天地图引入就不写了,这里写引入最基本的地图后,怎样变成遮罩效果 1,思路:外部是蓝色遮罩层,中间镂空为新乡市地图.通过天地图demo修改为自己想要的效果. 2,阿里云下载新乡市四周边界坐标对数据进 ...
CSS实现鼠标悬浮时背景图片拉近且增加遮罩层效果
效果预览点击查看效果我们在浏览网站时会发现有一些图片在鼠标悬浮在上时会有放大拉近的效果. 想要实现这个效果有两种方法,第一种方法是控制背景图片,第二种方法是控制插入的图片,我们这里介绍第一 ...
html遮罩层原理,纯js实现遮罩层效果原理分析
可以说这个功能,在我理解了前面的"贪吃蛇"之后,实在是与刚开始想象的难度差了好多,当然是这种方式有取巧之嫌,终归是实现了功能,我们来进行分析整理 1.实现原理本片文章的是实现原 ...

CSS3实现遮罩层效果

CSS3实现遮罩层效果

第一步、创建外层遮罩

实现鼠标穿透遮罩层，而不穿透内容

CSS3实现遮罩层效果相关推荐

最新文章

热门文章