css - 需要在另一张图片下显示裁剪后的图片

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 的后备背景颜色将在图像加载失败时弥补百分比条。