6-4 使用者体验 -- 透过变暗降低吸引力

1. 这不仅仅是在APP等移动端常常见到的应用，在网页中也常常遇到。作者在书中给出了4种解决方法，我测试了这几种方法，当然不是每一种方法都和合适，所以推荐大家三种常用的方法

2. 我们可以看看其最终的效果

lightbox

小测试

方法1 -- HTML添加一个深色覆盖图层

html

第一步：
将overlay设置成fixed，并占满屏幕，调整期背景色为半透明深色
css

position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,.8);

第二步：
我们将lightbox设置成fixed布局，并设置其图层为

z-index : 1

其次就是居中显示了（常常用于dialog对话框）
css

.lightbox{ 
   position: fixed; 
   width: 200px;  
   height: 200px;  
   background: white;  
   left: calc(50% - 100px); 
   top: calc(50% - 100px);  
   z-index:  1;   
 
}

到此就达到了上述效果

但这种方法有缺点

1. 增加了html结构
2. 当我们显示对话框时，便不能再与页面其他组件进行交互（有时候却是一个优点）

---

方法2 -- 添加一个伪元素来解决

首先我们不再需要上述复杂的html标签，我们只需简单的在body或者这个容器上套用类名（dimmed）
---这真的是一个比较大的不足之处，假如我们要在容器上加入其它伪元素，这个方法就力不从心了
css

body.dimmed::before{ 
   content: ''; 
   position: fixed;  
   top: 0; right: 0; bottom: 0; left: 0; 
   z-index: 1; 
   background: rgba(0,0,0,.8);
}

lightbox和方法一中一样，我们让其居中显示

---

方法3 -- boxshadow解决方法

利用扩大box-shadow的扩散半径，并把平移值和模糊设置为0，建立一个非常大的阴影

box-shadow: 0 0 0 999px rgba(0,0,0,.8);

但是存在一个问题，它并不支持 非常大的解析度（>2000px）,所以采用了可视范围单位vmax

1vmax 等于 1vw或1vh,取决于哪个更大选择哪个

所以设置成：

box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);

这里有个需要注意的地方，这个方法最好使用在元素有固定定位和网页不能滚动时使用
当然还有一个很重要的特性，box-shadow不会捕捉任何鼠标互动，所以页面中的其他元素我们仍然可以点击使用

总结：

当我们可以使用第二种方法时尽量使用第二种方法，
其次第一种方法可以作为备用
第三种方法当要求与页面其他元素互动时使用比较合适