Как добавить прозрачную рамку? - PullRequest
Новая
       19

Как добавить прозрачную рамку?

0 голосов
/ 12 октября 2018

У меня есть простое изображение профиля пользователя и зеленый индикатор состояния.

Я хочу добавить прозрачную рамку к индикатору, которая превосходит изображение на заднем плане, как на изображении ниже.

Expecting result

Легко, когда фон одного цвета, мне просто нужно добавить границу с тем же цветом, но что делать, когда фон является градиентомили изображение например?Если я добавлю белую рамку, она будет выглядеть как изображение посередине, и я бы хотел сделать рендер как правильное изображение.

Как этого добиться? 

.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>

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

Я бы рассмотрел SVG и mask как показано ниже: 

.user {
  display: inline-block;
  position: relative;
}

svg {
  width: 200px;
  height: 200px;
}

.user:after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #57d642;
}

body {
  background: linear-gradient(to right, pink, purple);
}
<div class="user">
  <svg viewbox="0 0 200 200">
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <!-- This circle is your hole on the top -->
      <circle r="28" cx="162" cy="38" fill="black"/>
    </mask>
    <!-- the clipath will replace border-radius -->
    <clipPath id="circle">
       <circle cx="100" cy="100" r="100" fill="white" />            
    </clipPath>
  </defs>
<image width="200" height="200" xlink:href="http://lorempicsum.com/up/200/200/5" mask="url(#hole)" clip-path="url(#circle)"/>
</svg>
</div>
0 голосов
/ 12 октября 2018

Граница:? Px Цвет границы: rgba (255,255,255,0)

...