Page 184 - css揭秘

试一试 play.csssecrets.io/toggle-buttons

„ 选择符
http://w3.org/TR/selectors 相关规范

32 通过阴影来弱化背景

背景知识

RGBA 颜色

难题

很多时候，我们需要通过一层半透明的遮罩层来把后面的一切整体调
暗，以便凸显某个特定的 UI 元素，引导用户关注。比如，弹出层（参见图
6-13）以及交互式的“快速指南”就是这种效果的典型案例。这个效果最常
见的实现方法就是增加一个额外的 HTML 元素用于遮挡背景，然后为它添
加如下样式：

.overlay { /* 用于遮挡背景 */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}

.lightbox { /* 需要吸引用户注意的元素 */

32 通过阴影来弱化背景 153

඀ࠡ JOEC