目標:五顆星評分,實心對應分數,空心補足。兩層 div + CSS background-repeat: repeat-x 完美解決:
div:固定寬度 5 顆星寬,背景圖為空心星橫向重複。div:寬度 = 分數 × 單顆星寬度,背景圖為實心星橫向重複,覆蓋外層對應區域。
單一圖檔含實心/空心兩排,配合 background-position 切換。屬性僅兩個:
| 屬性 | 說明 |
|---|---|
| Comment | 評分項目註釋 |
| Score | 分數(決定實心寬度) |
繼承 WebControl,RenderContents 輸出表格 + 兩層 div,零圖片 <img> 標籤,極輕量。