Css 简明教程

CSS - Overlay

覆盖层是在另一个元素顶部放置的一层透明内容。可用于创建各种效果，如模态窗口、工具提示或弹出窗口。

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

要使用 CSS 创建覆盖层，请按照以下步骤操作：

  1. 创建一个 div 元素，一个用于覆盖层本身，另一个用于想要覆盖的内容。

  2. 将 Position 覆盖层元素绝对定位在页面顶部。

  3. 将覆盖层元素的 width 和 height 设置为 100%，以便覆盖整个页面。

  4. 将覆盖层元素的 background-color 设置为透明颜色，如 rgba(0, 0, 0, 0.5)。这将使覆盖层可见。

  5. 将覆盖层元素的 z-index 设置为高于页面上任何其他元素的 z 轴值。这将确保覆盖层始终显示在所有其他元素之上。

CSS Overlay - Basic Example

以下示例显示当单击按钮时出现的覆盖层效果，当单击页面上的任意位置时就会消失。

可以使用 JavaScript 通过使用 querySelector() 方法来获取覆盖层元素来显示和隐藏覆盖层 div 元素。单击按钮时，会执行一个函数，在块（可见）和无（隐藏）之间切换覆盖层容器的 display 属性。

<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 Overlay - Top to Bottom Sliding

有四种方法可创建滑动覆盖层效果：顶部、底部、左侧和右侧。我们将一个接一个地讨论每种类型并附带一个示例。

以下示例显示了一个覆盖层图像，当用户将其悬停时，会从图像顶部滑到底部——

<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 Overlay - Bottom to Top Sliding

以下示例显示了一张带有叠加效果的图片，从图片底部向上滑动至顶部，当用户将鼠标悬停在此图片上时 −

<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 Overlay - Left to Right Sliding

以下示例显示了一张带有叠加效果的图片，从左到右滑动，当用户将鼠标悬停在此图片上时 −

<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 Overlay - Right to Left Sliding

以下示例显示了一张带有叠加效果的图片，从右到左滑动，当用户将鼠标悬停在此图片上时 −

<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 Overlay - Fade Effect

以下示例展示如何创建一个叠加，当用户将鼠标悬停在图片上时，该叠加出现在图片的顶部 −

<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 - Image Title 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 - Image Icon 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 Overlay - Related Properties

下表列出了帮助创建叠加效果的 CSS 属性：

Property

Value

position

定义元素在页面上的定位方式。

opacity

设置元素的透明度。

z-index

设置元素的堆叠顺序。

transition

定义可应用于元素的不同类型的动画效果。