Я нашел способ сделать эту работу чистым css:
чистый метод CSS для включить img: after.
Вы можете проверить CodePen: я просто поддельный контент или посмотреть источник.
img {
/* hide the default image */
height:0;
width:0;
/* hide fake content */
font-size:0;
color:transparent;
/* enable absolute position for pseudo elements */
position:relative;
/* and this is just fake content */
content:"I'm just fake content";
}
/* initial absolute position */
img:before,
img:after {
position:absolute;
top:0;
left:0;
}
/* img:before - chrome & others */
img:before {
content:url(http://placekitten.com/g/250/250);
}
/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
padding:125px;
background:url(http://placekitten.com/g/250/250) no-repeat;
}
/* img:after */
img:after {
/* width of img:before */
left:250px;
content:url(http://lorempixel.com/350/200/city/1);
}
✓ Chrome 10 +
✓ Firefox 11 +
✓ Opera 9.8 +
✓ Safari
⊗ Internet Explorer 8/9
Пожалуйста, проверьте в других браузерах
Команда Scio предоставила решение этой проблемы. В основном добавьте --nullableCoders=true
в аргумент командной строки.