使用单个图像在图像上添加图像叠加

Question

我有一个相当棘手的情况。简而言之，我需要找到一种方法，只使用一个图像标记将图像叠加添加到图像上。更具体地说，我正在尝试在图像的右下角添加一个调整大小图标，提醒用户他们可以通过在标记位置进行克隆和拖动来调整图像大小。

我使用内联CKEditor，使用Interact.js允许图像内联调整大小。一切正常，但没有这个图像标记，你可以非常明显地调整图像大小。

不幸的是：之前和之后：img标签不起作用。如果我能做到这一点，那就没事了。我无法将图像包装在容器中，因为这会破坏图像编辑功能，例如拖放到另一个位置。整个效果必须包含在img标记内。

我能想到的最好的方法是添加调整大小图标的css边框图像并折叠左边框和上边框。它以一种可行的方式添加标记，但我希望标记位于图像上，而不是像我的预览一样位于其外部。此外，因为它是边框图像，我无法添加自定义光标以让用户知道他们可以点击那里。

那么任何想法？我可能不得不接受这个并继续前进。我更喜欢纯CSS解决方案，但我并不反对使用javascript和/或jquery来实现它。我试着做一些事情，当你把它放在上面的时候，图像会得到一个带有我定位的图像的包装，但它并不像人们期望的那样工作。

#foo{ padding:0 16px 16px 0}
#foo:hover{
    border: 10px solid transparent;
    padding: 0;
    -webkit-border-image: url(/templates/client/js/ckeditor/plugins/compuimage/images/resize.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(/templates/client/js/ckeditor/plugins/compuimage/images/resize.png) 50 round; /* Opera 11-12.1 */
    border-image: url(/templates/client/js/ckeditor/plugins/compuimage/images/resize.png) 50 round;     
    border-width:0 16px 16px 0;
    padding:0;
}

由于

Answer 1

不确定这是多么有效，也不确定它是否在浏览器中保持一致，但我设法将图像嵌套在图像中...

<img src="http://www.koala.net/images/stories/animals/birds/flightless/emu.jpg" >
<span><img src="http://www.greatsoftware.com/wp-content/uploads/2013/08/Reshape-Image-Resize.gif" /></span>
</img>

这是一个小提琴：https://jsfiddle.net/v2j20L7x/

适用于Chrome。希望在其他地方工作并做你想做的事。

祝你好运！