css遮罩效果
css的遮罩效果我理解分为3种，普通遮罩,阴影遮罩,模糊遮罩。我们先举例子一个一个说
1、普通遮罩
一般地，处理全屏遮罩的方法是使用额外标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .overlay{ position:fixed; top: 0;right: 0;left: 0;bottom: 0; background:rgba(0,0,0,0.8); } .lightbox{ position:absolute; top: 0;right: 0;left: 0;bottom: 0; margin:auto; z-index:1; width: 100px; height: 100px; background-color: white; } </style> </head> <body> <div class="overlay"></div> <div class="lightbox"></div> </body> </html> 效果图：
2、阴影遮罩
对于简单的应用场景和产品原型来说，我们可以利用box-shadow来达到调暗背景的效果
box-shadow: 0 0 0 999px rgba(0,0,0,0.8);
这个初步的解决方案有一个明显的问题，就是它无法在较大的屏幕分辨率(如>2000px)下正常工作。要么加大数字来缓解这个问题，要么换用视口单位来一劳永逸地解决它，只有这样才能确保"遮罩层"总是可以覆盖(至超出)视口
box-shadow: 0 0 0 50vmax rgba(0,0,0,0.8);
这个技巧非常简洁易用，但它存在两个非常严重的问题，从而制约了其使用场景
1、由于遮罩层的尺寸是与视口相关，而不是与页面相关的，滚动页面时，遮罩层的边缘就露出来了，除非给它加上position：fixed这个样式，或者页面并没有长到需要滚动的程度
2、这种效果无法防止用户的鼠标与页面的其他部分发生交互
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .lightbox{ position:absolute; top: 0;right: 0;left: 0;bottom: 0; margin:auto; z-index:1; width: 100px; height: 100px; background-color: white; box-shadow: 0 0 0 50vmax rgba(0,0,0,0.8); } </style> </head> <body> <div class="lightbox"></div> </body> </html> 3、模糊遮罩
把关键元素之外的一切都模糊掉，用来配合(或取代)阴影效果，这个效果的真实感更强，因为它营造出了"景深效果。视线聚焦在距离较近的物体上时，远处的背景就是虚化的
filter:blur(5px);
下面是一个实例，鼠标移出 模糊消失
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .lightbox{ position:absolute; top: 0;right: 0;left: 0;bottom: 0; margin:auto; z-index:1; width: 100px; height: 100px; background-color: white; box-shadow: 0 0 0 50vmax rgba(0,0,0,0.8); } .lightbox:hover{ filter:blur(5px); } </style> </head> <body> <div class="lightbox">模糊遮罩效果</div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知