1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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/post/6983.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: