jQuery 標簽雲：將矩形標簽改為自定義圖片形狀的實現方案

原始思路

代碼通過 CSS background-color + border-radius 繪製圓角矩形標簽，點擊切換 Selected 類改變顏色。

改為圖片形狀的核心修改

1. 移除背景色/邊框，改用 background-image。
2. 準備兩套圖片：未選中 tag-normal.png、選中 tag-selected.png（或用 Sprite 圖）。
3. CSS 重寫：

.cloud li {
    width: 80px; height: 80px; /* 圖片尺寸 */
    background: url('tag-normal.png') no-repeat center;
    border: none; text-indent: -9999px; /* 隱藏文字 */
    cursor: pointer;
}
.cloud li.Selected {
    background-image: url('tag-selected.png');
}

/* 保留顏色分類（可選） */
.cloud li.green { background-image: url('tag-green-normal.png'); }
.cloud li.green.Selected { background-image: url('tag-green-selected.png'); }

五角星形狀進階方案

若需非矩形點擊區域（如五角星），需用 clip-path 或 SVG：

.star-tag {
    width: 60px; height: 60px;
    background: gold;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star-tag.Selected { background: orange; }

或直接用 <svg><polygon points="..."/></svg> 內聯，點擊事件綁定在 SVG 元素上。

完整示例

參考答案中的 CSS 片段，將 background:url(...) 替換即可實現圖片標簽雲。