html - 图像下方的颜色条出现

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