📌  相关文章
📜  CSS overlay技巧

📅  最后修改于: 2020-11-05 00:54:26             🧑  作者: Mango

CSS overlay

overlay是指用涂层覆盖物体的表面。换句话说，它用于将一件事放在另一件事的顶部。覆盖层使网页更具吸引力，并且易于设计。

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

淡入淡出效果

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

例

 
 
 
    Image Overlay 
     
 
  
 
    
 
       

Fade in Overlay


Move the cursor over the image to see the effect.

图像叠加幻灯片

我们可以通过顶部，底部，左侧和右侧四种不同的类型来创建滑动叠加效果。我们将使用每个示例一个一个地讨论它。

从上到下滑动覆盖图

首先，我们通过一个示例了解如何在顶部的叠加层中创建幻灯片。

例

 
 
 
     
 
  
 
    
 
       

Slide in Overlay from top to bottom


Move the cursor over the image to see the effect.

从下到上滑动叠加层

在这种叠加效果中，当我们将光标移到图像上方时，将会从底部滑动到顶部。在以下插图中将很清楚。

例

 
 
 
     
 
  
 
    
 
       

Slide in Overlay from bottom to top


Move the cursor over the image to see the effect.

从左向右滑动覆盖图

顾名思义，它从左向右滑动。请参阅以下示例以详细了解它。

例

 
 
 
     
 
  
 
    
 
       

Slide in Overlay from left to right


Move the cursor over the image to see the effect.

从右向左滑动覆盖图

除了其中的滑动是从右到左之外，它与上述滑动效果相似。

例

 
 
 
     
 
  
 
    
 
       

Slide in Overlay from right to left


Move the cursor over the image to see the effect.

图片叠加标题

在图像叠加效果中，当我们将光标移到图像上方时，我们将在图像上看到标题。参见下图。

例










Image Overlay Title Effect


Move your mouse over the image to see the effect.






      
      
Welcome to javaTpoint.com

图像叠加图标

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

例












Image Overlay icon Effect


Move your mouse over the image to see the effect.