背景图像，填充和边框

Question

我有<div>填充了背景图片。我能够添加黑色边框。但是现在，我希望在背景图像周围有一个填充物，但它看起来像是白​​色的背景颜色。我如何像下面的例子那样做？

非常感谢提前。

Answer 1

您可以尝试使用背景属性background-origin: content-box

Example JSFiddle

Answer 2

不是单一的HTML元素，但如果你可以省去div的::before伪元素，那就有可能。

将div向下并向右移动白色边框的宽度，然后使::before比div本身大两倍于边框的宽度。

.backgrounded {
  width: 400px;
  height: 300px;
  background: url(http://lorempixel.com/400/300);
  position: relative;
  left: 8px;
  top: 8px;
  color:black; text-shadow:1px 1px white;
}
.backgrounded:before {
  display: block;
  content: '';
  width: 414px;
  height: 314px;
  position: absolute;
  left:-8px; top:-8px;
  z-index: -1;
  border: 1px solid black;
}

<div class="backgrounded">This is the div</div>