创建遮照图有几种技术：从使用绝对定位的元素到outline和伪元素。在本文中，我们将探索每个技术的实现样式以及他们之间的利与弊。

设计模式通常是一组最佳实践和技术，主要目的是用来解决一些最常见的设计“问题”，通常是在上下文中提出的设计原则。这些原则之是一“停留在页面”的原则。这一原则是建立在页面刷新都打破用户的心中想要的流程基础上，造成所谓的“变盲”，我们需要用户无论保时何地可以避免打破这种视觉流程。

我们可以在保留用户在网页和模型的过程中做出明智的选择。一个方式，让用户在同一页面上试图让内容在当前页面的背景下，通过展示一个“迷你页面”，或一个弹出的对话框。这个轻量级的层就是我们所说的一个“浮层”。

 

轻量级的浮层图可以用来问问题，获得输入，引入特征，包括流程，给予指示，或展示信息。他们可以直接由用户激活事件(如，点击一个动作，悬浮事件)或由Web应用程序在不同的阶段完成一个动作——Designing Web Interfaces

 

当用户交互只接受在弹出窗、灯箱广告效果的应用和其他的页面，显示会变得暗下来。

本教程的目的是向你介绍向个方法，使用CSS创建黯淡的叠加效果，复习他们的技术，并确定各自的优缺点。