将图像插入动画心形

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; 
}