3

我们希望为 CMS（wordpress/joomla）网站内容区域内的几乎所有img标签获得这种类型的边框（这就是为什么我们正在寻找仅使用 CSS 的解决方案，而不使用任何父标签）：

CSS边框图像负偏移

第一步使用此处的代码形式顺利进行：http: //border-image.com/（链接应显示我们使用的边框图像）， 但它在图像和实际边框的边缘之间创建了一个空间。

CSS边框图像正常

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

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

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

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

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

这是一个 JSfiddle，我们在其中使用所有上述 5 个选项进行测试，并且有足够的材料可以工作（整洁的图像、分组和分离的角、所有提到的代码都适用等）。

我们真的很感谢有人能够获得适用于img标签的确切结果。

4

2 回答 2

2

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

但是为什么不简单地将图像包装在 aspan中（可以通过 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/

于 2015-03-12T01:04:41.163 回答
1

您需要一个包装器才能使用 $(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" />

于 2015-03-12T01:16:13.210 回答