Отрицательное смещение CSS-изображения границы (без HTML-редакции)

Question

Мы стремимся получить именно этот тип границы для почти всех тегов img внутри области содержимого сайта CMS (wordpress/joomla) (поэтому мы ищем решение, использующее только CSS, без доступа к родительскому тегу):

Первый шаг идет гладко с формой кода здесь: http://border-image.com/ (ссылка должна показать используемое изображение нашей границы), но оно создает пространство между изображением и краем фактической границы.

Сначала мы попробовали некоторые правила CSS, которые могли бы сделать эту работу, но:

1. border-image-outset: распространяется только наружу, а не внутрь, помогает в случаях, когда фон сплошной
2. outline-offset: работает только для контура, не влияет на изображение границы
3. Несколько фонов: является ближайшим, но границы показывают НИЖЕ изображения, поэтому к нему должен быть применен отступ. Мы ожидаем, что он будет частично над изображением, как задумано (на самом деле это то, что мы реализовали до сих пор).

Мы уже нашли много похожих вопросов и попробовали использовать наиболее подходящие ответы:

1. ::after: ему нужно, чтобы у изображения был контент ="", который пропадает.
2. JQuery $(img).after: Мы не можем расположить граничные элементы относительно соответствующего изображения, так как они точно вставляются ПОСЛЕ изображения (то же, что и до). Нам потребуется установить это для родительского тега, который в большинстве случаев не имеет одинаковый размер img. В данный момент мы пытаемся немного завернуть.

До сих пор мы не смогли решить проблему как задумано.

Вот JSfiddle, где мы проводим тесты со всеми 5 опциями и располагаем достаточным материалом для работы (аккуратное изображение, сгруппированные и разделенные углы, все упомянутые коды и т. Д.).

Мы были бы очень признательны, если бы кто-то достиг точного результата, применимого к тегу img.

Answer 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" />

Answer 2

::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/