css背景图覆盖图片

CSS的背景图功能可以让我们在元素中添加背景图片，但是有时候我们希望图片可以被覆盖在背景图上，这该怎么实现呢？

.container {
    background-image: url(bg-img.jpg);
}
.overlay {
    position: relative;
}
.overlay img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
    

以上的代码中，我们先在容器中添加背景图，并使容器的位置为相对定位。然后我们再添加一个叫做overlay的元素，它也是相对定位的。接下来，我们在overlay元素中添加一个img标签，并将其定位为绝对定位，使它覆盖在整个overlay元素上面，借助z-index属性保证图片是在背景图之上。现在，我们的图片就被成功地覆盖在容器的背景图上面了。

以一张名为photo.jpg的图片为例，实现如下：

div class="container">
    div class="overlay">
    img src="photo.jpg">
    /div>
    /div>
    style>
.container {
    background-image: url(bg-img.jpg);
}
.overlay {
    position: relative;
}
.overlay img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
    /style>
    

以上代码中，我们先将容器设置了bg-img.jpg作为背景图，然后在overlay元素中添加了一张photo.jpg图片，并使其覆盖在背景图之上。

在CSS中实现覆盖背景图的方法还有很多，这里只是其中的一种。我们可以根据需求选择不同的方法，从而达到最佳的展示效果。

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