CSS Overlay 覆盖层属性是放置在另一个元素之上的透明内容层。它可用于创建不同的效果，例如模式窗口、工具提示或弹出窗口。
overlay 元素应绝对定位，并且具有比内容元素更高的 z-index。这将确保叠加层显示在内容之上。
要使用 CSS 创建叠加层，请按照下列步骤操作:
创建两个 div 元素，一个用于覆盖层本身，另一个用于您要覆盖的内容。
将覆盖层元素绝对放置在页面顶部。
将覆盖元素的宽度和高度设置为 100%，以便覆盖整个页面。
设置覆盖元素的背景颜色将覆盖元素设置为透明颜色，例如 rgba(0, 0, 0, 0.5)。这将使覆盖层可见。
将覆盖层元素的 z-index 设置为高于页面上任何其他元素的 z-index 的值。这将确保叠加层始终显示在所有其他元素之上。
CSS Overlay: 基本示例
下面的示例显示了一个叠加效果，当您单击按钮时，该效果会出现，而当您单击页面上的任意位置时，该效果会消失.
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>yxjc123.com CSS Overlay</h1>
</div>
<div style="padding:20px">
<button class="overlay-button" onclick="overlayFun()">点击按钮</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 Overlay: 从上到下滑动
有四种不同的方式来创建滑动叠加效果:顶部、底部、左侧和右侧。我们将通过示例一一讨论每种类型。
下面的示例显示了一个带有叠加层的图像，当用户将鼠标悬停在其上方时，该叠加层会从图像顶部滑落至底部 -
<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>要查看效果，请将光标悬停在图像上。</h2>
<div class="overlay-container">
<img src="/css/images/tutimg.png">
<div class="top-bottom">
<h2>从上到下图像叠加</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%;
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>要查看效果，请将光标悬停在图像上。</h2>
<div class="overlay-container">
<img src="/css/images/tutimg.png">
<div class="bottom-top">
<h2>从下到上图像叠加</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%;
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>要查看效果，请将光标悬停在图像上。</h2>
<div class="overlay-container">
<img src="/css/images/tutimg.png">
<div class="left-right">
<h2>从左到右图像叠加</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: 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>要查看效果，请将光标悬停在图像上。</h2>
<div class="overlay-container">
<img src="/css/images/tutimg.png">
<div class="right-left">
<h2>从右到左图像叠加</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 .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>要查看效果，请将光标悬停在图像上。</h2>
<div class="overlay-container">
<img src="/css/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>要查看效果，请将光标悬停在图像上。</h2>
<div class="overlay-container">
<img src="/css/images/tutimg.png">
<div class="title-overlay">
<h1>Yxjc123.com</h1>
</div>
</div>
</body>
</html> CSS Overlay: 图像图标叠加层
这里是一个叠加层示例当用户将鼠标悬停在图像上时，在图像上显示图标 -
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/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>要查看效果，请将光标悬停在图像上。</h2>
<div class="overlay-container">
<img src="/css/images/tutimg.png">
<div class="icon-overlay">
<a href="#" class="display-icon">
<i class="fa fa-star"></i>
</a>
</div>
</div>
</body>
</html> CSS Overlay: 相关属性
下表列出了有助于创建叠加效果的 CSS 属性:
| 属性 | 值 |
|---|---|
| position | 定义元素在页面上的定位方式。 |
| opacity | 设置透明度。 |
| z-index | 设置元素的堆叠顺序. |
| transition | 定义可应用于元素的不同类型的动画效果. |