覆盖层是放置在另一个元素顶部的透明内容层。它可用于创建不同的效果，例如模态窗口、工具提示或弹出框。
覆盖元素应绝对定位，并具有比内容元素更高的 z 索引。这将确保叠加层显示在内容的顶部。
要使用 CSS 创建覆盖层，请按照下列步骤操作：
- 创建两个 div 元素，一个用于覆盖本身，另一个用于要覆盖的内容。
- 将覆盖元素绝对放置在页面顶部。
- 将覆盖元素的宽度和高度设置为 100%，以便它覆盖整个页面。
- 将覆盖元素的背景色设置为透明颜色，例如 rgba（0， 0， 0， 0.5）。这将使叠加层可见。
- 将覆盖元素的 z 索引设置为高于页面上任何其他元素的 z 索引的值。这将确保覆盖层始终显示在所有其他元素的顶部。
CSS 覆盖 - 基本示例
以下示例显示了一个叠加效果，该效果在单击按钮时出现，在单击页面上的任意位置时消失。
JavaScript 可用于通过使用 querySelector（） 方法来显示和隐藏覆盖 div 元素，方法是获取覆盖元素。当单击该按钮时，将执行一个函数，该函数在块（可见）和无（隐藏）之间切换覆盖容器的显示属性。
<html>
<head>
<style>
.overlay-container {
position: fixed;
display: none;
width: 100%;
height: 100%;
text-align: center;
background-color: rgba(213, 86, 207, 0.3);
z-index: 999;
cursor: pointer;
}
.overlay-content {
padding: 20px;
}
.overlay-button {
background-color: #38dc29;
color: white;
border: none;
padding: 20px;
cursor: pointer;
font-size: 20px;
text-align: center;
display: block;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="overlay-container" onclick="overlayFun()">
<h1>Tutrialspoint CSS Overlay</h1>
</div>
<div style="padding:20px">
<button class="overlay-button" onclick="overlayFun()">Click on Button</button>
</div>
<script>
let overlayVisible = false;
function overlayFun() {
const overlay = document.querySelector(".overlay-container");
overlay.style.display = overlayVisible ? "none" : "block";
overlayVisible = !overlayVisible;
}
</script>
</body>
</html>
CSS 覆盖 - 从上到下滑动
有四种不同的方法可以创建滑动叠加效果：顶部、底部、左侧和右侧。我们将通过一个示例逐一讨论每种类型。
以下示例显示了一个带有覆盖层的图像，当用户将鼠标悬停在图像上时，该覆盖层会从图像的顶部滑落到底部 -
<html>
<head>
<style>
.overlay-container img {
width: 200px;
height: 200px;
margin-left: 40%;
}
.overlay-container {
position: relative;
width: 25%;
height: auto;
}
.overlay-container:hover .top-bottom {
opacity: 1;
height: 200px;
}
.top-bottom{
position: absolute;
transition: 0.9s ease;
opacity: 0.3;
width: 200px;
border-radius: 5px;
height: 0;
top: 0;
left: 40%;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src= "images/tutimg.png">
<div class="top-bottom">
<h2>Top to Bottom Image Overlay</h2>
</div>
</div>
</body>
</html>
CSS 覆盖 - 从下到上滑动
以下示例显示了一个具有叠加效果的图像，当用户将鼠标悬停在图像上时，该图像会从图像的底部滑到顶部 -
<html>
<head>
<style>
.overlay-container img {
width: 200px;
height: 200px;
margin-left: 250px;
}
.overlay-container {
position: relative;
width: 25%;
height: auto;
}
.overlay-container:hover .bottom-top {
opacity: 1;
height: 200px;
}
.bottom-top {
position: absolute;
transition: 0.9s ease;
opacity: 0.3;
width: 200px;
border-radius: 5px;
height: 0;
bottom: 0;
left: 250px;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src= "images/tutimg.png">
<div class="bottom-top">
<h2>Bottom to Top Image Overlay</h2>
</div>
</div>
</body>
</html>
CSS 覆盖 - 从左到右滑动
以下示例显示了一个具有叠加效果的图像，当您将鼠标悬停在其上时，该图像会从左向右滑动 -
<html>
<head>
<style>
.overlay-container img {
width: 200px;
height: 200px;
margin-left: 250px;
}
.overlay-container {
position: relative;
width: 25%;
height: auto;
}
.overlay-container:hover .left-right {
opacity: 1;
width: 200px;
}
.left-right {
position: absolute;
transition: 0.9s ease;
opacity: 0.3;
width: 0;
border-radius: 5px;
height: 200px;
top: 0;
left: 0;
margin-left: 250px;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src="images/tutimg.png">
<div class="left-right">
<h2>Left to Right Image Overlay</h2>
</div>
</div>
</body>
</html>
CSS 覆盖 - 从右到左滑动
以下示例显示了一个具有叠加效果的图像，当您将鼠标悬停在其上时，该图像会从右向左滑动 -
<html>
<head>
<style>
.overlay-container img {
width: 200px;
height: 200px;
margin-left: 250px;
}
.overlay-container {
position: relative;
width: 67%;
height: auto;
}
.overlay-container:hover .right-left {
opacity: 1;
width: 200px;
}
.right-left {
position: absolute;
transition: 0.9s ease;
opacity: 0.3;
width: 0;
border-radius: 5px;
height: 200px;
top: 0;
right: 0;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src="images/tutimg.png">
<div class="right-left">
<h2>Right to Left Image Overlay</h2>
</div>
</div>
</body>
</html>
CSS 覆盖 - 淡入淡出效果
以下示例演示如何创建一个覆盖层，当用户将鼠标悬停在图像上时，该覆盖层将显示在图像顶部 -
<html>
<head>
<style>
.overlay-container img {
width: 200px;
height: 200px;
margin-left: 250px;
}
.overlay-container {
position: relative;
width: 25%;
}
.overlay-container:hover .fade-effect {
opacity: 0.9;
height: 200px;
}
.fade-effect {
position: absolute;
transition: 0.9s ease;
opacity: 0;
width: 200px;
height: 200px;
border-radius: 5px;
top: 0;
left: 250px;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src= "images/tutimg.png">
<div class="fade-effect">
<h2>Fade Overlay Effect</h2>
</div>
</div>
</body>
</html>
CSS Overlay - 图像标题叠加
下面是一个叠加示例，当用户将鼠标悬停在图像上时，该叠加层会显示图像的标题 -
<html>
<head>
<style>
.overlay-container img {
width: 200px;
height: 200px;
margin-left: 250px;
}
.overlay-container {
position: relative;
width: 25%;
}
.overlay-container:hover .title-overlay {
opacity: 0.9;
height: 80px;
}
.title-overlay {
position: absolute;
transition: 0.9s ease;
opacity: 0;
width: 200px;
height: 80px;
border-radius: 5px;
bottom: 0;
left: 250px;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h1 {
text-align: center;
color: #a0f037;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src= "images/tutimg.png">
<div class="title-overlay">
<h1>Tutorialspoint</h1>
</div>
</div>
</body>
</html>
CSS Overlay - 图像图标叠加
下面是一个覆盖层的示例，当用户将鼠标悬停在图像上时，该覆盖层会在图像上显示图标 -
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.overlay-container {
position: relative;
width: 200px;
height: 200px;
margin-left: 40%;
}
.overlay-container img {
width: 100%;
height: 100%;
}
.icon-overlay {
position: absolute;
transition: 0.9s ease;
opacity: 0;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(211, 70, 230, 0.9);
text-align: center;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.overlay-container:hover .icon-overlay {
opacity: 1;
}
.display-icon {
color: rgb(60, 235, 50);
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src="images/tutimg.png">
<div class="icon-overlay">
<a href="#" class="display-icon">
<i class="fa fa-star"></i>
</a>
</div>
</div>
</body>
</html>
CSS 覆盖 - 相关属性
下表列出了有助于创建覆盖效果的 CSS 属性：
| 属性 | 值 |
|---|---|
| position | 定义元素在页面上的位置。 |
| opacity | 设置元素的透明度。 |
| z-index | 设置元素的堆叠顺序。 |
| transition | 定义可应用于元素的不同类型的动画效果。 |
