Попробуйте ... это не врезается в изображение. Опять же, посмотрите изображение требуемого результата.
я есть простое изображение профиля пользователя и зеленый индикатор состояния.
Я хочу добавить прозрачную границу к индикатору, который превосходит изображение на заднем плане, как на картинке ниже.
Легко, когда фон одного цвета, мне просто нужно добавить рамку того же цвета, но что делать, если фоном является градиент или изображение, например? Если я добавлю белую рамку, она будет выглядеть как изображение посередине, и я бы хотел сделать рендер как правильное изображение.
Как этого добиться?
.user {
display: inline-block;
position: relative;
}
img {
width: 75px;
height: 75px;
border-radius: 75px;
}
.user-state {
position: absolute;
top: 4px;
right: 4px;
width: 15px;
height: 15px;
border-radius: 10px;
background: #57d642;
}<body>
<div class="user">
<img src="http://lorempicsum.com/up/255/200/5" alt="">
<div class="user-state"></div>
</div>
</body>