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