下方圖像中的顏色條顯示

Question

我試圖根據百分比從左至右填充非幾何圖形的圖像。例如，如果我想要填充30％的形狀，則只會從左到右填充該百分比的形狀。

我可以得到填充的形狀，但也有一個顏色欄也出現在填充的形狀下面。我如何防止這種情況出現？

<div class="pic" > 
     <img class = "image" height= "100%" width = "100%" 
      src="http://i60.tinypic.com/warmo6.png"/> 
    </div> 


    .pic { 
     background: linear-gradient(to right, red 40%, white 60%); 
    } 

Answer 1

一下添加到您的CSS：

.pic img { vertical-align: top; } 

Example here