css 图片上盖图片上

CSS样式可以让我们的网页更加美观，其中图片上盖图片是很常见的一种效果。接下来我们就来学习一下如何使用CSS来实现这种效果。

// HTML代码
<div class="container">
  <img src="img1.jpg">
  <img src="img2.jpg">
</div>

// CSS代码
.container {
  position: relative;
}

.container img:last-child {
  position: absolute;
  top: 0;
  left: 0;
}

css 图片上盖图片上

上面的代码中，我们首先为容器元素设置了position:relative;的属性，这是为了让内部元素的position:absolute;可以相对于它进行定位。接着，我们使用了CSS选择器:last-child来选中最后一个img元素，然后将其position设置为absolute，这样它就能够覆盖在下面的图片上方。

当然，上面的代码只是一个简单的示例，实际上我们还可以通过设置z-index属性来控制两张图片的层级关系。例如：

// HTML代码
<div class="container">
  <img src="img1.jpg">
  <img src="img2.jpg">
</div>

// CSS代码
.container {
  position: relative;
}

.container img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.container img:first-child {
  z-index: 2;
}

在上面的代码中，我们将下面的图片的z-index设置为2，上面的图片的z-index设置为1，这样就能够将下面的图片置于上层了。

除了使用元素的position:absolute;属性来实现图片上盖图片的效果之外，我们还可以使用CSS的伪元素:before和:after来创建覆盖层。例如：

// HTML代码
<div class="container">
  <img src="img1.jpg">
</div>

// CSS代码
.container {
  position: relative;
}

.container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(img2.jpg);
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

在上面的代码中，我们在容器元素的前面创建了一个覆盖层，它的位置是absolute，大小与容器元素相同，背景图片是我们想要显示在上面的图片。同时，我们还设置了opacity属性为0.5，这样就能够看到下面的图片了。

总之，通过CSS的样式设置，我们可以轻松地实现图片上盖图片的效果。这种效果不仅可以用在图片上，还可以用在其他类型的元素上，例如文字、表格等等。希望这篇文章能够对大家有所帮助。

css 图片上盖图片上

相关文章