需要在另一個圖像下顯示裁剪後的圖像

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的備用背景顏色將組成如果圖像無法加載，則爲百分比欄。