css 图片 叠加 效果图

在网页设计中，图片是一个重要的元素。通过CSS叠加效果，可以使图片效果更加生动和有趣。

以下是如何使用CSS叠加图片的实例代码：

.container {
  position: relative;
  width: 500px;
  height: 500px;
  padding: 20px;
  background-color: #fff;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: rgba(0,0.5);
}

在这个例子中，我们首先创建了一个容器（class="container"）来包含图片。接下来，我们将图片的定位设置为absolute，使它可以覆盖容器的整个区域。图片的z-index设置为1，以使它位于其他元素的上面。

我们还创建了一个名为"overlay"的叠加层，使用了相同的定位和尺寸设置，并将它的z-index设置为2。然后，我们设置了该图层的背景颜色为半透明的黑色，以创建淡入淡出效果。

最终，我们可以向容器中添加任何我们想要叠加在图片上的元素。这些元素可以放置在图片上面，利用z-index属性为它们设置层级关系即可。

使用CSS叠加图片可以为网站或应用程序添加视觉上的吸引力，并使其看起来更加专业和时尚。无论您需要创建幻灯片、相册或更复杂的视觉效果，CSS叠加图片都是一个强大的工具，值得尝试。