圆形图像背景周围的透明CSS渐变

Question

我一直在尝试在图像背景周围实现透明的渐变效果（考虑白色），也许是绝对定位？，您可以想象我在谈论解释性绘画的含义。

Answer 1

您可以使用radial-gradient函数在css中创建径向渐变，并使用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>