CSS透明径向渐变问题答案

【问题标题】：CSS transparent radial gradient issueCSS透明径向渐变问题
【发布时间】：2018-07-05 18:06:10
【问题描述】：

我是 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');
  }

&lt;div class="transparent-gradient" style=""&gt;&lt;/div&gt;

【问题讨论】：

如果答案对您有帮助，您应该检查它是否已回答。这将帮助其他用户

标签： html css image gradient

【解决方案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');
}

&lt;div class="transparent-gradient" style=""&gt;&lt;/div&gt;

对于rgba(255,255,255,0) 40%，40% 指定“size”。使用rgba(255,255,255,.9) 100% 0.9，您可以使白色变得不那么硬（rgbA 的不透明度/ alpha）。 1 是完全白色的 .5 是 white 和 50% 不透明度。

【讨论】：