css弹框外变暗或模糊

CSS弹框一般会在用户点击某个按钮或出现某种情况下弹出，对于页面可见性和用户体验都有很好的提升。为了让弹框脱颖而出，我们可以在弹框出现时让背景变暗或者模糊，这样能够更加突出弹框内容。

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
  background-color: #fff;
  Box-shadow: 0 0 10px rgba(0,.3);
  transition: all .3s ease; 
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  background-color: rgba(0,.5);
}

.blur-background {
  filter: blur(3px);
  -webkit-filter: blur(3px);
}

以上代码中，我们首先定义了弹框的样式，设置了弹框为fixed定位，居中显示，并设置了z-index防止被页面其他元素遮挡。接着我们设置了一个modal-backdrop样式，这是用来实现背景变暗的，使用了rgba设置颜色值，其中最后一个参数可控制透明度。需要注意的是，z-index要比弹框小一点，以保证弹框在最上层。

如果想让背景模糊，我们可以再加上一个类名，利用CSS3的filter: blur()实现，将背景进行高斯模糊处理，如上述代码中的.blur-background类。

以上就是实现CSS弹框背景变暗或变模糊的方法，借此加强用户体验，提高网站的可见性。