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

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的后备背景颜色将弥补百分比条。