Прозрачный градиент CSS вокруг круглого фона изображения - PullRequest
Новая
       11

Прозрачный градиент CSS вокруг круглого фона изображения

0 голосов
/ 30 июня 2018

Я продолжаю пытаться добиться эффекта прозрачного градиента (думая о белом) вокруг фона изображения, может быть, абсолютно расположенного? Вы можете представить, о чем я говорю, когда я вижу свою объяснительную краску.

image

1 Ответ

0 голосов
/ 30 июня 2018

Вы можете создавать радиальные градиенты в CSS с помощью функции radial-gradient, а ваши элементы округлять с помощью border-radius.

. 

.transparent-gradient {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.transparent-gradient img {
  min-width: 100%;
  min-height: 100%;
  vertical-align: middle;
}

.transparent-gradient::after {
  content: "";
  background-image: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
<div class="transparent-gradient">
  <img src="https://images.unsplash.com/photo-1530279281203-4c60af01ee58?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02b66d237286bcb2a071ed6c1e72adf3&auto=format&fit=crop&w=1950&q=80" width="400">
</div>
...