1
我試圖在圖像上添加一個覆蓋圖以表示用戶完成一項任務所完成的「進度」 - 因此覆蓋層的高度應隨時間增加（percentege完成）。 只是創建一個簡單的覆蓋很容易，我只是包裝圖像，並添加下面的另一個div來包含覆蓋與包裝div的絕對位置。使用css覆蓋（不是方形）圖像的一部分
事情是這樣的 HTML：
<div class="list">
<div class="badge-wrapper">
<img src="http://www.clipartlord.com/wp-content/uploads/2014/02/police-badge2.png" alt="badge" />
<div class="badge-progress"></div>
</div>
</div>
CSS：
.list .badge-wrapper {
position: relative;
display: inline-block;
margin: 15px;
width: 75px;
height: 75px;
}
.list .badge-wrapper img {
width: 100%;
height: 100%;
}
.list .badge-wrapper .badge-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
background: rgba(50, 250, 50, 0.5);
}
我的問題是，我的形象是不是方的，我什麼，我想，只有需要overlayd圖片，不是包裝的背景，而是自我形象。
我有道理嗎？ :) 我有一個小提琴爲任何喜歡教育我的人準備。小提琴演示我不想要的行爲。疊加層只應包含在圖像中。這可能嗎？
該鏈接用於創建操作圖像並創建svg。不是我正在尋找的東西。 – aup 2014-11-06 09:56:53
我已經添加了一些代碼，是你想要的嗎？ – 2014-11-06 11:53:01
這正是我期待的效果！但我不想在標記中對圖像進行64位編碼。這可以解決在我原來的問題提供的jsFiddle？ – aup 2014-11-06 13:26:40