创建叠加效果只是意味着将两个 div 放在同一个位置,但在需要时两个 div 都会出现,即悬停或单击其中一个 div 以显示第二个 div 时。叠加层非常干净,使网页看起来整洁。它看起来很精致,设计也很简单。叠加层可以使用两个简单的 CSS 属性创建:
- z-索引
- 位置
示例 1:
overlay div
GeeksforGeeks
A computer science portal for geeks
输出:
注意:通过向页面添加更多 CSS 来自定义叠加效果,使其看起来更优雅。
示例 2:
overlay div
GeeksforGeeks
A computer science portal for geeks
输出:
悬停前:
悬停后: