CSS3径向梯度

Question

我要知道这是否可能。“创意”的photoshop部门拿出了这张照片，在此之前，它只是从1到5种颜色的渐变。他们仍然这样做，但他们现在如何在上面有一个白色的圆圈。我要怎么做才能做到这一点。示例语法没有精确的位置。在白色圆圈的顶部，我需要添加特定的字体和文本“在白色”。

​

​

在此之前，非常感谢您。

Answer 1

使用多个覆盖梯度作为背景可能更简单。

第一个是简单的线性梯度，从左到右，第二个径向梯度在顶部。

然后，这只是一个定位(绝对)您的文本元素在白色圆圈(记住你知道它的位置)。

一个快速而肮脏的演示：

​

div {
  height: 350px;
  width: 90%;
  margin: 1em auto;
  border: 1px solid lightgrey;
  background: 
    radial-gradient(circle closest-side at 75% 50%, white, white 60%, transparent), 
    linear-gradient(to right, #344862, white 75%, yellow);
  position: relative;
}
span {
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div>
  <span>Lorem ipsum dolor.</span>
</div>

​

备注：径向梯度中心的定位是如何与<span>的定位相同的。transform只是确保文本在圆圈中居中。