本文将详细介绍如何给CSS的背景图加边框。在CSS中，实现背景图边框一般有两种方法：使用伪元素和用边框图片。
方法一：使用伪元素
在CSS中，可以使用伪元素`::before`或`::after`来插入一些内容。我们可以在伪元素中设置一个带边框的背景图即可实现给原有背景图添加边框的效果。
首先，我们可以先在HTML中给该元素设置背景图。下面是一个例子：
<div class="bg"></div>然后在CSS中，为这个元素添加`::before`伪元素，并在伪元素中设置带边框的背景图。注意，当使用伪元素时，要将其设为`display: block`，否则设置的边框无法正确显示。
.bg {
width: 300px;
height: 200px;
background: url("bg.png") no-repeat center center;
position: relative;
}
.bg::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid #000;
z-index: -1;
}
上面代码中，`.bg::before`伪元素设置了一个2像素的黑色边框，且将其`z-index`设为-1，使其在背景图下面。
优劣势分析
使用伪元素的方法优点是实现方式简单，不会影响原有的HTML代码和布局。缺点是需要使用绝对定位来实现，容易产生莫名其妙的bug。
方法二：使用边框图片
在CSS中，我们也可以使用边框图片（border-image）来实现背景图边框的效果。使用此方法需要先准备一张适当的边框图片。
下面是一份样例代码：
<div class="bg2"></div>.bg2 {
width: 300px;
height: 200px;
border: 2px solid transparent;
border-image: url('border.png') 20 repeat;
background: url("bg.png") no-repeat center center;
}
上面的CSS代码中，使用了`border-image`来设置了一个边框图片，并指定了图片大小为20像素，且重复使用。
可以看到，使用此方法的优点是设置简单，不会影响HTML代码和布局。但缺点是需要准备一张边框图片，且容易产生跨浏览器的问题。
总结
本文介绍了两种常见的给背景图添加边框的方法：使用伪元素和使用边框图片。使用伪元素的方法相对比较简单，但容易出现bug；使用边框图片需要准备一张图片，但设置相对较简单，且跨浏览器的问题也较少。
在实际开发中，可以根据具体情况选择使用哪一种方法。