Я пытаюсь добавить наложение к изображению, чтобы представить «прогресс», который пользователь выполнил для выполнения задачи, поэтому высота наложения должна возрастать со временем (процент делается). Простое создание простого наложения достаточно просто, я просто обертываю изображение и добавляю еще один 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
Я добавил код, это то, что вы хотите? –
Это именно тот эффект, который я ищу! Но я не хочу, чтобы base64-кодировал изображения в разметке. Может ли это быть разрешено в предоставленном jsFiddle в моем первоначальном вопросе? – aup