图像下方的颜色条显示出来

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