极客教程CSS 覆盖
什么是覆盖
覆盖是放置在另一个元素顶部的透明内容层。它可以用于创建不同的效果，如模态窗口，工具提示或浮动窗口。
覆盖元素应该使用绝对定位，并且比内容元素具有较高的 z-index 。这样可以确保覆盖显示在内容之上。
CSS覆盖
按照以下步骤使用CSS创建覆盖：
- 创建两个
元素，一个用于覆盖本身，一个用于要覆盖的内容。
- 将覆盖元素绝对定位在页面顶部。
-
将覆盖元素的宽度和高度设置为100%，以覆盖整个页面。
-
将覆盖元素的背景颜色设置为透明颜色，如rgba(0, 0, 0, 0.5)。这将使覆盖可见。
-
将覆盖元素的 z-index 设置为大于页面上任何其他元素的z-index值。这将确保覆盖始终显示在所有其他元素的顶部。
示例
以下示例显示了当单击按钮时出现的覆盖效果，并在单击页面上的任意位置时消失。
可以使用JavaScript通过使用 querySelector() 方法获取覆盖元素来显示和隐藏覆盖
元素。当单击按钮时，执行一个函数，切换覆盖容器的 display 属性值为块（可见）和无（隐藏）。
下面是一个示例−
<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>
从底部到顶部滑动覆盖
以下示例显示了一张图片，当用户悬停在图片上时，会有一个从底部向顶部滑动的覆盖效果。
<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>
从左到右滑动遮罩
以下示例演示了一种图像效果，当你将鼠标悬停在图像上时，遮罩效果从左向右滑动。
<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>
从右到左滑动覆盖
下面的示例显示了一张图片，当你将鼠标悬停在上面时，会有一个从右向左滑动的覆盖效果。
<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>
淡入淡出叠加效果
以下示例展示了如何在用户悬停在图像上方时创建一个叠加效果：
<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>
图像叠加标题
以下是一个示例，当用户悬停在图像上时，会显示图像的标题。
<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>
图像叠加图标
以下是一个示例，当用户将鼠标悬停在图像上方时，会显示覆盖在图像上方的图标。
<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 | 定义可以应用于元素的不同类型的动画效果。 |