CSS - 叠层

上一页
下一页

叠层是一个透明的内容层，放置在另一个元素的顶部。它可以用来创建不同的效果，例如模态窗口、工具提示或弹出窗口。

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

叠层效果示例

当您将鼠标悬停在 TutorialsPoint 徽标上时，您可以看到叠层效果。这种样式为访问您网页的用户提供了动态体验。

Background Image

目录


 

如何创建叠层效果？

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

  • **创建容器：** 使用容器元素来容纳您想要叠加的内容。容器可以是 div 元素、span 元素甚至是图像。
  • **设置定位：** 将容器设置为**position: relative**，以便其中的任何绝对定位元素都将相对于此容器进行定位。
  • **添加叠层元素：** 在容器内添加另一个元素（叠层）并设置position: absolute以确保它覆盖整个容器。还要确保叠层的 top、left 属性设置为 0，并且 width、height 属性设置为 100%，以便它完全覆盖容器。
  • **设置叠层样式：** 使用rgba()函数设置叠层的背景颜色以获得半透明效果。最初，将叠层的不透明度设置为 0，使其默认情况下不可见。
  • **添加悬停效果：** 对叠层容器使用hover伪类，以便在用户将鼠标悬停在容器上时将叠层的不透明度从 0 更改为 1。

CSS 叠层基本示例

以下示例显示如何使用上述步骤在 CSS 中创建简单的叠层效果。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container {
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }

        .overlay-container {
            position: relative;
            width: auto; 
            height: auto; 
            display: inline-block;
        }

        img {
            display: block;
            width: 100%;
            height: auto;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 128, 0, 0.5); 
            opacity: 0;
            transition: opacity 0.5s ease;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .overlay-container:hover .overlay {
            opacity: 1;
        }

        .login-button {
            padding: 10px 20px;
            background-color: #ffffff;
            color: #228B22;
            border: 2px solid #228B22;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s, color 0.3s;
        }

        .login-button:hover {
            background-color: #228B22;
            color: #ffffff;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="overlay-container">
        <img src="/html/images/test.png" alt="Image">
        <div class="overlay">
            <a href="/css/index.htm" 
               target="_blank" class="login-button">
                    Learn CSS
            </a>
        </div>
    </div>
</div>

</body>
</html>

使用 JavaScript 的叠层效果

以下示例使用 JavaScript 创建叠层效果，该效果在您单击按钮时出现，在您单击页面上的任何位置时消失。

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

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .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;
        }
        .content {
            padding: 20px;
        }
        .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="container" onclick="overlay()">
        <h1>TutorialsPoint CSS Overlay</h1>
    </div>

    <div style="padding:20px">
        <button class="button" onclick="overlay()">
            Click on Button
        </button>
    </div>

    <script>
        let Visible = false;
        function overlay() {
            const overlay = document.querySelector(".container");
            overlay.style.display = Visible ? "none" : "block";
            Visible = !Visible;
        }
    </script>
</body>
</html>

CSS 叠层自上而下滑动

以下示例显示一个图像，当用户将鼠标悬停在其上时，该图像的叠层会从图像顶部向下滑动。

示例

<!DOCTYPE html>
<html lang="en">

<head> 
    <style> 
        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> Hover your cursor over the image.</h2>

    <div class="overlay-container"> 
        <img src= "/css/images/tutimg.png"> 
        <div class="top-bottom">
            <h2> Top to Bottom Image Overlay </h2>
        </div> 
    </div> 
</body> 

</html>

CSS 叠层自下而上滑动

以下示例显示一个图像，当用户将鼠标悬停在其上时，该图像的叠层会从图像底部向上滑动。

示例

<!DOCTYPE html>
<html lang="en">

<head> 
    <style> 
        img { 
            width: 200px; 
            height: 200px; 
        } 
        .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; 
            background-color: #d346e6; 
            text-align: center;
            color: #ffffff;
        }
        h2 {
            text-align: center;
        }   
    </style> 
</head> 

<body> 
    <h2>Hover your cursor over the image.</h2>
    <div class="overlay-container"> 
        <img src= "/css/images/tutimg.png"> 
        <div class="bottom-top">
            <h2>Bottom to Top Image Overlay</h2>
        </div> 
    </div> 
</body> 

</html>

CSS 叠层自左向右滑动

以下示例显示一个图像，当您将鼠标悬停在其上时，该图像的叠层会从左向右滑动。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        img {
            width: 200px;
            height: 200px;             
        }
        .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; 
            background-color: #d346e6;
            text-align: center;
            color: #ffffff;
        }
        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
   <h2>Hover your cursor over the image.</h2>

   <div class="overlay-container">
        <img src="/css/images/tutimg.png">
        <div class="left-right">
            <h2>Left to Right Image Overlay</h2>
        </div>
   </div>
</body>

</html>

CSS 叠层自右向左滑动

以下示例显示一个图像，当您将鼠标悬停在其上时，该图像的叠层会从右向左滑动。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        img {
            width: 200px;
            height: 200px;           
        }
        .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;
            background-color: #d346e6;
            text-align: center;
            color: #ffffff;
        }
        h2 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>Hover your cursor over the image.</h2>

    <div class="overlay-container">
        <img src="/css/images/tutimg.png">
        <div class="right-left">
            <h2>Right to Left Image Overlay</h2>
        </div>
    </div>
</body>
</html>

CSS 叠层淡入淡出效果

以下示例显示如何在用户将鼠标悬停在其上时，在图像顶部创建一个叠层。

示例

<!DOCTYPE html>
<html lang="en">

<head> 
    <style> 
        img { 
            width: 200px; 
            height: 200px;       
        } 
        .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; 
            background-color: #d346e6; 
            text-align: center;
            color: #ffffff;
        }
        h2 {
            text-align: center;
        }   
    </style> 
</head>

<body> 
    <h2>Hover your cursor over the image.</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 叠层图片标题

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

<!DOCTYPE html>
<html lang="en">

<head> 
    <style> 
        img { 
            width: 200px; 
            height: 200px;            
        } 
        .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;  
            background-color: #f0f0f0; 
            text-align: center;
        }
        h1 {
            text-align: center;
            color: black;
        }   
    </style> 
</head>

<body> 
   <h2>Hover your cursor over the image.</h2>

   <div class="overlay-container"> 
        <img src= "/css/images/tutimg.png"> 
        <div class="title-overlay">
            <h1>TutorialsPoint</h1>
        </div> 
   </div> 
</body> 

</html>

CSS 图片图标叠层

这是一个叠层示例，当用户将鼠标悬停在其上时，它会显示图像上的图标。

示例

<!DOCTYPE html>
<html lang="en">

<head> 
<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; 
        }  
        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>Hover your cursor over the image.</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>
打印页面
上一页
下一页
广告