CSS - 叠加

什么是叠加

覆盖层是放置在另一个元素之上的透明内容层。它可用于创建不同的效果，例如模式窗口、工具提示或弹出窗口。

覆盖元素应该绝对定位，并且具有比内容元素更高的z-index 。这将确保覆盖层显示在内容之上。

CSS 叠加

要使用 CSS 创建叠加层，请按照下列步骤操作：

创建两个div元素，一个用于覆盖本身，另一个用于要覆盖的内容。
将覆盖元素绝对放置在页面顶部。
将overlay元素的宽度和高度设置为100%，使其覆盖整个页面。
将overlay元素的background-color设置为透明色，如rgba(0, 0, 0, 0.5)。这将使覆盖层可见。
将覆盖元素的z-index设置为高于页面上任何其他元素的 z-index 的值。这将确保叠加层始终显示在所有其他元素之上。

例子

以下示例显示了叠加效果，当您单击按钮时，该效果会出现；当您单击页面上的任意位置时，该效果会消失。

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>

从下到上滑动覆盖

以下示例显示了具有叠加效果的图像，当用户将鼠标悬停在图像上时，该图像会从图像底部向上滑动到顶部 -

<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>

从左到右滑动覆盖

以下示例显示了具有叠加效果的图像，当您将鼠标悬停在其上方时，该图像会从左向右滑动 -

<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>

从右到左滑动覆盖

以下示例显示了具有叠加效果的图像，当您将鼠标悬停在其上方时，该图像会从右向左滑动 -

<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>

淡入淡出叠加效果

以下示例展示了如何创建当用户将鼠标悬停在图像上时出现在图像顶部的叠加层 -

<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>

图像叠加标题

这是一个叠加层的示例，当用户将鼠标悬停在图像上时，该叠加层会显示图像的标题 -

<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>

图像叠加图标

这是一个覆盖层的示例，当用户将鼠标悬停在图像上时，该覆盖层会在图像上显示图标 -

<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 叠加 - 相关属性

以下是overlay的CSS属性列表：

财产	价值
位置	定义元素在页面上的定位方式。
不透明度	设置元素的透明度。
z 索引	设置元素的堆叠顺序。
过渡	定义可应用于元素的不同类型的动画效果。