图像上的CSS边框/轮廓图像

Question

我的图像需要图像上方的边框图像而不是图像周围。

边框是透明的png。 看看这里如果我使用border会发生什么：

您可以看到图像背景为白色 我想让边框在图像上方。经过一些谷歌搜索后，我找到了outline。在这里我可以设置一个负值。这里的问题是outline无法保存图像......

我尝试在图像和边框的边距上设置负值，但这没有帮助。

任何想法？

这是代码（不是很有趣）：

<div class="top_img">
    <!-- some content -->
</div>

这是CSS：

<style>
    background-image: url(the_image.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;    
    border: 20px solid transparent;
    border-image: url(images/border_image.png) 30 round;
</style>