将图像插入动画心形

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-index才能将其置于心脏图层之上。要将小猫轻推到心脏中的位置，请根据需要设置左侧和顶部属性。因为图像突破了心脏，你可以使用transform：scale（）来缩放它以使其适合。把它们放在一起，你有：

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