Css 简明教程

CSS - Overlay

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

An overlay is a transparent layer of content that is placed on top of another element. It can be used to create different effects, such as a modal window, a tooltip, or a popover.

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

The overlay element should be positioned absolutely and have a higher z-index than the content element. This will ensure that the overlay is displayed on top of the content.

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

To create an overlay using CSS, follow these steps:

  1. Create two div elements one for the overlay itself and one for the content that you want to overlay.

  2. Position the overlay element absolutely on top of the page.

  3. Set the width and height of the overlay element to 100%, so that it covers the entire page.

  4. Set the background-color of the overlay element to a transparent color, such as rgba(0, 0, 0, 0.5). This will make the overlay visible.

  5. Set the z-index of the overlay element to a value higher than the z-index of any other elements on the page. This will ensure that the overlay is always displayed on top of all other elements.

CSS Overlay - Basic Example

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

The following example shows an overlay effect that appears when you click a button and disappears when you click anywhere on the page.

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

JavaScript can be used to show and hide the overlay div element by using the querySelector() method to get the overlay element. When the button is clicked, a function is executed that toggles the display property of the overlay container between block (visible) and none (hidden).

<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

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

There are four different ways to create a sliding overlay effect: top, bottom, left, and right. We will discuss each type one by one with an example.

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

The following example shows an image with an overlay that slides down from the top of the image to the bottom when the user hovers over it −

<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

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

The following example shows an image with an overlay effect that slides up from the bottom of the image to the top when the user hovers over it −

<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

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

The following example shows an image with an overlay effect that slides from left to right when you hover over it −

<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

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

The following example shows an image with an overlay effect that slides from right to left when you hover over it −

<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

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

The following example shows how to create an overlay that appears on top of an image when the user hovers over it −

<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

这是一个叠加的示例，当用户将鼠标悬停在图片上时，它会显示图片的标题 −

Here is an example of an overlay that displays the title of an image when the user hovers over it −

<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

这是一个叠加的示例，当用户将鼠标悬停在图片上时，它会显示图片上的图标 −

Here is an example of an overlay that displays the icons over an image when the user hovers over it −

<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 属性：

Following table lists of CSS properties which help create overlay effect:

Property

Value

position

Defines how an element is positioned on the page.

opacity

Sets the transparency of an element.

z-index

Sets the stacking order of elements.

transition

Defines the different types of animation effects that can be applied to elements.