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>
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.