如何 - 叠加
❮ 上一个 下一个 ❯
了解如何使用 CSS 创建叠加效果。
叠加
了解如何创建叠加效果
叠加
点击任意位置关闭叠加效果
开启叠加效果
如何创建叠加效果
步骤 1) 添加 HTML
使用任何元素并将其放置在文档内的任何位置
示例
步骤 2) 添加 CSS
样式叠加元素
示例
#overlay { position: fixed; /* 位于页面内容顶部 */ display: none; /* 默认隐藏 */ width: 100%; /* 全宽（覆盖整个页面） */ height: 100%; /* 全高（覆盖整个页面） */ top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); /* 带有透明度的黑色背景 */ z-index: 2; /* 如果您对其他元素使用不同的顺序，请指定堆叠顺序 */ cursor: pointer; /* 悬停时添加指针 */}
步骤 3) 添加 JavaScript
使用 JavaScript 开启和关闭叠加效果
示例
function on() { document.getElementById("overlay").style.display = "block";}function off() { document.getElementById("overlay").style.display = "none";}
自己动手试一试 »
带文本的叠加效果
在叠加层内添加任何您想要的内容，并将其放置在您想要的位置。在此示例中，我们在页面中央添加文本
示例
叠加文本
自己动手试一试 »
❮ 上一个 下一个 ❯
★ +1
W3schools 学习路径
跟踪您的进度 - 免费！
登录 注册