Когда я опубликовал это изначально, это было невозможно, так что это обходной путь.Теперь я просто предлагаю использовать другие ответы.
Невозможно точно получить контур изображения, но вы можете подделать его с помощью div за изображением в центре.
Если мой трюк не сработает, вам придется разрезать изображение и сделать это для каждого из маленьких изображений.(чем больше изображений, тем точнее будет выглядеть тень), но для большинства изображений она выглядит хорошо только с одним img.
вам нужно сделать обтекание div вокруг вашего img примерно так:
<div id="imgWrap">
<img id="img" scr="imgLocation">
</div>
затем вы помещаете пустой разделитель внутри обертки (это будет тень)
<div id="imgWrap">
<div id="shadow"> </div>
<img id="img" scr="imgLocation">
</div>
и затем вы должны заставить тень появиться позади img с помощью CSS:
#img {
z-index: 1;
}
#shadow {
z-index: 0; /*make this value negative if doesnt work*/
box-shadow: 0 -130px 180px 150px rgba(255, 255, 0, 0.6);
width: 0;
height: 0;
}
теперь поместите imgWrap, чтобы расположить исходное изображение ..., чтобы отцентрировать тень изображения, которое вы можете связать с первыми двумя значениями прямоугольника, делая их отрицательными .... или вы можете расположить изображениеи теневые делители абсолютно равняются верхним и левым значениям img = 0, а теневые div-значения равны половине ширины и высоты img соответственно.
Если это выглядит ужасно, отрежьте ваше img и попробуйте снова.
(Если вы не хотите, чтобы тень за изображением находилась только на контуре, вам нужно сделать свое изображение непрозрачным и заставить его работать так, как если бы оно было прозрачным, что не так сложно, и вы можете прокомментировать, и япозже объясню)