CSS border-image negative offset (without HTML edition)

CSS border-image negative offset (without HTML edition)

我们希望为 CMS (wordpress/joomla) 网站内容区域内的几乎所有 img 标签获取这种类型的边框（这就是我们为什么仅使用 CSS、 搜索解决方案而不访问任何父标签):

第一步使用这里的代码形式很顺利： http://border-image.com/（link 应该显示我们使用的边框图像）， 但它在图像和实际边框的边缘之间创建了一个 space。

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

  1. border-image-outset: 它只延伸到外面，不延伸到里面，有助于背景是纯色的情况
  2. outline-offset: 仅适用于轮廓，不影响边框图像
  3. Multiple Backgrounds: 是最接近的，但边框显示在图像下方，因此需要应用填充。我们希望它能按预期部分覆盖在图像上（实际上这是我们迄今为止实现的）。

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

  1. ::after : 它需要图像有 content="" 它会消失。
  2. jquery $(img).after：我们不能相对于相应的图像定位边框元素，因为它们精确地插入在图像之后（与之前相同）。我们需要在父标签上设置此项，大多数情况下父标签的大小与 img 不同。我们目前正在尝试一些包装。

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

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

我们将非常感谢有人实现适用于 img 标签的确切结果。

::after 不适用于 img 元素，因为此类伪元素应该作为虚拟 child 元素插入到元素中，并且图片元素不能有子元素。

但为什么不简单地将图像包裹在 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/

您需要一个包装器才能使用 $(img).after 因为边框元素获取父元素的大小（并将角插入到该元素）。您可以使用此代码和一些 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" />