將圖像插入動畫心形

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