需要在另一个图像下显示裁剪后的图像

Question

我在一条线上有5颗星，并且有2种图像为空和填充。我需要通过css填充一个，在空的情况下裁剪，使其看起来像填充百分比。但看起来我在使用标准裁剪方法时遇到问题。你能提出建议吗？

Answer 1

我会用两个嵌套的容器和做它在某种程度上是这样的：

#outer { 
    background: url('empty.png') top left repeat-x #666666; 
    position: relative; 
    height: 16px; /* set this to the height of the image */ 
    width: 80px; /* set this to a multiple of the image’s width */ 
} 

#inner { 
    background: url('filled.png') top left repeat-x #999900; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 16px; /* same as above */ 
} 

根据需要设置通过行内CSS内部容器上的width属性：

style='width: 32px;' 
style='width: 64px;' 

（一点也没有”不一定必须是一幅图像宽度的倍数。）

奖励：如果图片不使用透明度，CSS的备用背景颜色将组成如果图像无法加载，则为百分比栏。