CSS overlay

2025年3月26日 | 阅读 4 分钟

覆盖层 (Overlay) 的意思是在物体表面覆盖一层涂料。换句话说，它是将一个东西放在另一个东西的上面。覆盖层可以使网页更具吸引力，并且易于设计。

创建覆盖层效果意味着将两个 div 放在同一位置，但两者仅在需要时出现。要使第二个 div 出现，我们可以将鼠标悬停或单击一个 div。在这两个 div 中，一个 div 是覆盖层 div，它包含当用户将鼠标悬停在图像上时将显示的内容，第二个 div 是一个容器，它将同时容纳图像及其覆盖层。

淡入覆盖层效果

在这种覆盖层效果中，当我们将鼠标移到图像上时，覆盖层将出现在图像的顶部。让我们看看它是如何工作的。

示例

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Image Overlay</title> 
    <style> 
        .container img { 
            width: 300px; 
            height: 300px; 
        } 
        .container { 
            position: relative; 
            width: 25%; 
            height: auto;
        } 
          
        .overlay{ 
            position: absolute; 
            transition: 0.5s ease; 
            height: 300px; 
            width: 300px; 
            top: 0; 
            left: 20px; 
            background-color: lightblue; 
	opacity: 0;
        } 
         .container:hover .overlay { 
            opacity: 0.9; 
        } 
          
    </style> 
</head> 
  
<body> 
    <center> 
       
<h1>Fade in Overlay</h1>
<h2>Move the cursor over the image to see the effect.</h2>
 <div class="container"> 
            <img src= "jtp.png"> 
            <div class="overlay"></div> 
        </div> 
    </center> 
</body> 
  
</html>

图像覆盖层滑动

我们可以通过四种不同的类型创建滑动覆盖层效果：顶部、底部、左侧和右侧。我们将通过每个示例逐一讨论。

从上到下覆盖层滑动

首先，我们通过示例了解如何从顶部创建滑动覆盖层。

示例

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
        .container img { 
            width: 300px; 
            height: 300px; 
        } 
        .container { 
            position: relative; 
            width: 25%; 
            height: auto;
        }  
        .container:hover .overlay { 
            opacity: 1; 
	height: 300px; 
	} 
        .overlay{ 
            position: absolute; 
            transition: 0.7s ease; 
            opacity: 0; 
	width: 300px; 
            height: 0; 
            top: 0; 
            right: 20px; 
            background-color: lightblue;; 
        } 
          
    </style> 
</head> 
  
<body> 
    <center> 
       
<h1>Slide in Overlay from top to bottom</h1>
<h2>Move the cursor over the image to see the effect.</h2>
 <div class="container"> 
            <img src= "jtp.png"> 
            <div class="overlay"></div> 
        </div> 
    </center> 
</body> 
  
</html>

从下到上覆盖层滑动

在这种覆盖层效果中，当我们将鼠标悬停在图像上时，将从底部向上滑动。这将在以下插图中有清楚的说明。

示例

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
        .container img { 
            width: 300px; 
            height: 300px; 
        } 
        .container { 
            position: relative; 
            width: 25%; 
            height: auto;
        }  
        .container:hover .overlay { 
            opacity: 1; 
	height: 300px; 
	} 
        .overlay{ 
            position: absolute; 
            transition: 0.7s ease; 
            opacity: 0; 
	width: 300px; 
            height: 0px; 
	bottom: 0; 
            right: 20px; 
            background-color: lightblue;; 
        } 
          
    </style> 
</head> 
  
<body> 
    <center> 
       
<h1>Slide in Overlay from bottom to top</h1>
<h2>Move the cursor over the image to see the effect.</h2>
 <div class="container"> 
            <img src= "jtp.png"> 
            <div class="overlay"></div> 
        </div> 
    </center> 
</body> 
</html>

从左到右覆盖层滑动

顾名思义，这是从左到右滑动的。请参阅以下示例以详细了解。

示例

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
        .container img { 
            width: 300px; 
            height: 300px; 
        } 
        .container { 
            position: relative; 
            width: 25%; 
            height: auto;
        }  
        .container:hover .overlay { 
            opacity: 1; 
	width: 300px; 
	} 
        .overlay{ 
            position: absolute; 
            transition: 0.7s ease; 
            opacity: 0; 
	width: 0; 
            height: 100%; 
	bottom: 0; 
            left: 20px; 
            background-color: lightblue;; 
        } 
           
    </style> 
</head> 
  
<body> 
    <center> 
       
<h1>Slide in Overlay from left to right</h1>
<h2>Move the cursor over the image to see the effect.</h2>
 <div class="container"> 
            <img src= "jtp.png"> 
            <div class="overlay"></div> 
        </div> 
    </center> 
</body> 
  
</html> 

从右到左覆盖层滑动

这与上述滑动效果类似，除了它是由右到左滑动的。

示例

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
        .container img { 
            width: 300px; 
            height: 300px; 
        } 
        .container { 
            position: relative; 
            width: 25%; 
            height: auto;
        }  
        .container:hover .overlay { 
            opacity: 1; 
	width: 300px; 
	} 
        .overlay{ 
            position: absolute; 
            transition: 0.7s ease; 
            opacity: 0; 
	width: 0; 
            height: 100%; 
	bottom: 0; 
            right: 20px; 
            background-color: lightblue;; 
        } 
           
    </style> 
</head> 
  
<body> 
    <center> 
       
<h1>Slide in Overlay from right to left</h1>
<h2>Move the cursor over the image to see the effect.</h2>
 <div class="container"> 
            <img src= "jtp.png"> 
            <div class="overlay"></div> 
        </div> 
    </center> 
</body> 
  
</html>

图像覆盖层标题

在图像覆盖层效果中，当我们将鼠标悬停在图像上时，我们会在图像上看到标题。有关相同内容，请参见下图。

示例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   body{
      text-align: center;
   }
* {box-sizing: border-box;}

.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}

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

.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgba(0, 0, 0, 0.2); 
  width: 100%;
  opacity:0; 
  transition: .9s ease;
  font-size: 25px;
  padding: 20px;
}

.container:hover .overlay {
  opacity: 1.5;
}
</style>
</head>
<body>

<h1>Image Overlay Title Effect</h1>
<h2>Move your mouse over the image to see the effect.</h2>

<center>
<div class="container">
      <img src="jtp.png">
      <div class="overlay">Welcome to javaTpoint.com</div>
</div> </center>


</body>
</html>

图像覆盖层图标

在此覆盖层效果中，当鼠标悬停时，会出现一个覆盖整个图像的图标。我们可以为该图标设置链接以在页面之间切换。这可以从以下示例中清楚地看出。

示例

<!DOCTYPE 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>
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 1s ease;
  background-color: lightblue;
}

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

.icon {
  color: blue;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

</style>
</head>
<body>
<center>
<h1>Image Overlay icon Effect</h1>
<h2>Move your mouse over the image to see the effect.</h2>

<div class="container">
  <img src="jtp.png" class="image">
  <div class="overlay">
  <a href="#" class="icon">
	<i class="fa fa-bars"></i>
  </a>
  </div>
</div>
</center>
</body>
</html>

下一主题CSS :root 选择器

CSS overlay

淡入覆盖层效果

示例

图像覆盖层滑动

从上到下覆盖层滑动

示例

从下到上覆盖层滑动

示例

从左到右覆盖层滑动

示例

从右到左覆盖层滑动

示例

图像覆盖层标题

示例

图像覆盖层图标

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS overlay

淡入覆盖层效果

示例

图像覆盖层滑动

从上到下覆盖层滑动

示例

从下到上覆盖层滑动

示例

从左到右覆盖层滑动

示例

从右到左覆盖层滑动

示例

图像覆盖层标题

示例

图像覆盖层图标

示例

相关帖子

page-break-after 属性

CSS Descendant Selector

CSS quotes

CSS text-orientation

CSS font-family

CSS Position Relative

CSS background-blend-mode

CSS transition-delay

CSS Opacity

CSS Card Design

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器