css - 将图像插入动画心形

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 以将其置于心脏层之上。要将小猫推到心脏内的位置，请根据需要设置 left 和 top 属性。因为图像从心脏中分离出来，所以您可以使用 transform:scale() 对其进行缩放以使其适合。综合起来，您有:

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