CSS border-image负偏移（不含HTML版）

Question

我们希望在CMS（wordpress / joomla）网站的内容区域内获得几乎所有 img 标签的这种类型的边框（这就是为什么我们只使用CSS搜索解决方案的原因） ， ，无需访问任何父标记 ）：

这里的代码表格顺利进行： http://border-image.com/（链接应显示我们使用的边框图像）， 但它会在图像和实际边框的边缘之间创建一个空格。

我们首先尝试了一些可以完成这项工作的CSS规则，但是：

1. border-image-outset：它只延伸到外面，而不是内部，有助于背景为纯色的情况
2. outline-offset：仅适用于大纲，不影响border-image
3. 多个背景 ：是最近的一个，但边框显示的是图像，因此需要应用填充。我们希望它能够按照预期部分覆盖图像（实际上它是我们迄今为止所实现的）。

我们已经发现了许多类似的问题，并尝试使用最适用的答案：

1. ::after：它需要图片内容=“”才能消失。
2. jquery $(img).after：我们无法将边框元素相对于对应的图像定位，因为它们是在图像之后精确插入的（与之前相同）。我们需要在父标签上设置它，这大多数时候都没有与img相同的大小。我们正在尝试一些包装。

到目前为止，我们还没能按预期解决问题。

Here's a JSfiddle我们正在使用以上所有5个选项进行测试，并且有足够的材料可以工作（整洁的图像，分组和分离的角落，所有提到的代码appliead等）。

我们非常感谢有人获得适用于 img 标记的确切结果。

Answer 1

::after对img元素没有好处，因为这些伪元素应该作为元素内的虚拟子元素插入，而图像元素不能有孩子。

但为什么不简单地将图像包装在span内（可以通过jQuery完成），然后将背景应用到那个？

.image-border {
    display:inline-block; /* so that it takes up the same space as the image */
    position:relative;
    padding:6px;
    background: url(http://i.imgur.com/0yCz3oA.png) top left,
      url(http://i.imgur.com/fWtyg99.png) top right,
      url(http://i.imgur.com/UcOam5I.png) bottom left,
      url(http://i.imgur.com/pjYWHyM.png) bottom right;
    background-repeat: no-repeat;
}
.image-border img {
    position:relative; /* for z-index to work */
    display:block; /* so that margins can work and there is no underline space reserved */
    margin:-3px; /* drag image “under” the borders on each side
                    by half of the border width resp. span padding */
    z-index:-1; /* make image display below the span */
}

http://jsfiddle.net/nfsuxbyL/

Answer 2

你需要一个包装器来使用$（img）.after因为border元素得到了父元素的大小（并且只是将角插入那个元素）。您可以使用此代码和一些css：

$('img').wrap('<div class="IMGwrapper"></div>')
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/0yCz3oA.png" class="TL" />');
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/pjYWHyM.png" class="BR" />');
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/UcOam5I.png" class="BL" />');
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/fWtyg99.png" class="TR" />');

.IMGwrapper {
  display: inline-block;
  position: relative;
  line-height: 0;
}
.IMGwrapper .TL,
.IMGwrapper .TR,
.IMGwrapper .BR,
.IMGwrapper .BL {
  position: absolute;
}
.IMGwrapper .TL {
  top: -3px;
  left: -3px;
}
.IMGwrapper .TR {
  top: -3px;
  right: -3px;
}
.IMGwrapper .BR {
  bottom: -3px;
  right: -3px;
}
.IMGwrapper .BL {
  bottom: -3px;
  left: -3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
jQuery'd Edges:
<img src="http://i.imgur.com/ZLmYjVc.png" />