CSS透明径向渐变问题

Question

我是 CSS 渐变的新手并试图掌握它，我正在尝试应用白色透明 css 渐变来包围圆形 div 带有背景图像。不幸的是，我得到的效果不是我想要的效果，我怎样才能使图像看起来不那么被渐变遮挡并且渐变不像它那么宽，我想让它只影响边界图像，大概距离外环约 30 像素深。

我的代码：

.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;
  }
  .transparent-gradient{
  width:300px; height:300px; margin:20px 0px; align-self:center;position:relative; overflow:hidden; background-color:red;border-radius:50%; background-size:cover; background-position:center; background-image:url('https://images.unsplash.com/photo-1530279281203-4c60af01ee58?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02b66d237286bcb2a071ed6c1e72adf3&auto=format&fit=crop&w=1950&q=80');
  }

<div class="transparent-gradient" style=""></div>

Answer 1

.transparent-gradient::after {
  content: "";
  background: radial-gradient(ellipse at center, rgba(255,255,255,0) 40%,rgba(255,255,255,.9) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.transparent-gradient{
  width:300px; 
  height:300px; 
  margin:20px 0px; 
  align-self:center;
  position:relative; 
  overflow:hidden; 
  background-color:red;
  border-radius:50%; 
  background-size:cover; 
  background-position:center; 
  background-image:url('https://images.unsplash.com/photo-1530279281203-4c60af01ee58?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02b66d237286bcb2a071ed6c1e72adf3&auto=format&fit=crop&w=1950&q=80');
}

<div class="transparent-gradient" style=""></div>

与rgba(255,255,255,0) 40%一起，40%指定了“size”。使用 rgba(255,255,255,.9) 100% .9，您可以降低白色的硬度（不透明度/来自 rgbA 的 alpha）。 1 是完全白色 .5 是 white，具有 50% 不透明度。

CSS透明径向渐变问题

CSS transparent radial gradient issue

html

css

gradient

image