css 图片显示在上面

CSS的背景图片显示是非常方便易用的，但有时我们需要将图片盖在文本内容上面或者更改图片的位置、大小等属性。这时，我们就需要使用CSS的“将图片显示在文本上面”的功能。

.background-img {
    background-image: url("example.jpg");
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.content {
    position: relative;
    z-index: 2;
}

如上代码，我们首先定义了一个具有背景图片的元素。因为我们需要在图片上方放置内容，所以我们需要给这个元素一个相对定位(position: relative)。然后，我们再通过z-index属性指定层级，使得图片处于文本之后。接着，我们在文本容器中定义position: relative和z-index: 2，使得其处于图片之上。通过这种方式，我们就可以方便地控制图片和文本之间的堆叠关系。

除此之外，我们还可以利用CSS的绝对定位(position: absolute)来更改图片的位置和大小。

.img-container {
    position: relative;
}
.img-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
}
    

如上代码，我们首先定义了一个具有相对定位的元素作为图片的容器。然后，我们再将图片设为绝对定位，并把其top和left属性都设为50%，使其处于容器中间。由于图片的原始大小可能不适合我们的需求，所以我们可以通过设置width和height属性来更改图片的大小。最后，通过transform: translate(-50%, -50%)属性将图片在容器中居中显示。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！