将图像插入动画心形中

Question

我在心跳形状上有问题，我想在形状内添加图像和宽度为100％，但图像落后于形状。

https://jsfiddle.net/pphewde8/

<div class="heart">
  <img src="http://placekitten.com/240/240">
  <span class="left" ></span>
  <span class="right"></span>
</div>

Answer 1

您需要z索引图像以将其带到心脏层上。要将小猫放在心脏内部的位置，请根据需要将左和顶部特性设置。因为图像突然发出了心脏，您可以将其扩展，使其适合使用：scale（）。将它们放在一起，您有：

img {
  left: 70px;
  position: relative;
  top: 10px;
  transform: scale(0.75);
  z-index: 1;
}