调整居中径向渐变的半径

Question

我正在重新设计我当前的项目，并找到了一种使用以下方法淡化 div 背景的左右边缘的简单方法。我一直在尝试编辑中心圆的半径，以使其更小。如果整个渐变样式不消失，我似乎无法改变它。

我正在尝试将黄色区域设置为文本的背景，逐渐淡化为透明。我需要怎么做才能获得更透明和更少颜色的圆圈？

  background-image: radial-gradient(center center, circle cover, #ffeda3, transparent);
  background-image: -o-radial-gradient(center center, circle cover, #ffeda3, transparent);
  background-image: -ms-radial-gradient(center center, circle cover, #ffeda3, transparent);
  background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, transparent);
  background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, transparent);

Answer 1

调整径向渐变半径的方法是指定色标百分比。也就是说，我们需要指定一种颜色的结束位置和另一种颜色的开始位置。

在您提到的渐变中，没有提到颜色停止百分比，因此从元素中心绘制的每个圆的颜色从 #ffeda3 渐变到透明。

background-image: radial-gradient(center center, circle cover, #ffeda3, transparent);

可能的解决方案

现在，根据您希望实际渐变的外观，您可以使用我在以下代码段中提供的三种方法中的任何一种：

div.hard-stop {
  text-align: center;
  background-image: -moz-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
  background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);  
  background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
}

div.gradual-1 {
  text-align: center;
  background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
  background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, transparent 30%);  
  background-image: radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
}

div.gradual-2 {
  text-align: center;
  background-image: -moz-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
  background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);  
  background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
}

/* Just for demo */
body {
  background: black;
}
div{
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="hard-stop">
  <a href="#">Test</a>
  <a href="#">Test 2</a>
  <a href="#">Test 3</a>
</div>

<div class="gradual-1">
  <a href="#">Test</a>
  <a href="#">Test 2</a>
  <a href="#">Test 3</a>
</div>

<div class="gradual-2">
  <a href="#">Test</a>
  <a href="#">Test 2</a>
  <a href="#">Test 3</a>
</div>

说明

上面的代码片段中使用了三种不同的渐变，下面是对每种渐变的解释：

硬停止渐变：

background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);

这是一个硬停止渐变。也就是说，直到父元素的 30% 所有 1px 圆圈都是颜色 #ffeda3 并且之后所有 1px 圆圈都是透明的。如您所见，在 30% 标记处有一个颜色的硬切换。

渐进 - 1:

background-image: radial-gradient(center center, circle cover, #ffeda3, transparent 30%);

这是一个渐进的过程，直到达到透明。第一个 1px 圆圈有颜色 #ffeda3 并且每个 1px 圆圈的颜色在确定之后使得在 30% 标记颜色变得透明。在 30% 之后，渐变的颜色保持透明。

渐进 - 2:

background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);

从第一个 1px 圆到容器的 30%，此渐变的颜色为 #ffeda3。从 30% 标记到 35% 标记，每个 1px 圆圈的颜色从 #ffeda3 逐渐变为透明。从35%开始，每个1px圆的颜色保持透明

调整居中径向渐变的半径

Resize the radius of a centred radial gradient

css

radial-gradients

可能的解决方案

说明