CSS - 覆盖

上一页
下一页

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

覆盖元素应绝对定位，并具有比内容元素更高的 z 索引。这将确保叠加层显示在内容的顶部。

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

  • 创建两个 div 元素，一个用于覆盖本身，另一个用于要覆盖的内容。
  • 将覆盖元素绝对放置在页面顶部。
  • 将覆盖元素的宽度和高度设置为 100%，以便它覆盖整个页面。
  • 将覆盖元素的背景色设置为透明颜色，例如 rgba（0， 0， 0， 0.5）。这将使叠加层可见。
  • 将覆盖元素的 z 索引设置为高于页面上任何其他元素的 z 索引的值。这将确保覆盖层始终显示在所有其他元素的顶部。

CSS 覆盖 - 基本示例

以下示例显示了一个叠加效果，该效果在单击按钮时出现，在单击页面上的任意位置时消失。

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


<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 覆盖 - 从上到下滑动

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

以下示例显示了一个带有覆盖层的图像，当用户将鼠标悬停在图像上时，该覆盖层会从图像的顶部滑落到底部 -


<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 覆盖 - 从下到上滑动

以下示例显示了一个具有叠加效果的图像，当用户将鼠标悬停在图像上时，该图像会从图像的底部滑到顶部 -


<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 覆盖 - 从左到右滑动

以下示例显示了一个具有叠加效果的图像，当您将鼠标悬停在其上时，该图像会从左向右滑动 -


<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 覆盖 - 从右到左滑动

以下示例显示了一个具有叠加效果的图像，当您将鼠标悬停在其上时，该图像会从右向左滑动 -


<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 覆盖 - 淡入淡出效果

以下示例演示如何创建一个覆盖层，当用户将鼠标悬停在图像上时，该覆盖层将显示在图像顶部 -


<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 - 图像标题叠加

下面是一个叠加示例，当用户将鼠标悬停在图像上时，该叠加层会显示图像的标题 -


<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 - 图像图标叠加

下面是一个覆盖层的示例，当用户将鼠标悬停在图像上时，该覆盖层会在图像上显示图标 -


<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 覆盖 - 相关属性

下表列出了有助于创建覆盖效果的 CSS 属性：

属性 值
position 定义元素在页面上的位置。
opacity 设置元素的透明度。
z-index 设置元素的堆叠顺序。
transition 定义可应用于元素的不同类型的动画效果。
本页
上一页
下一页