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