CSS3径向渐变

Question

我想知道这是否可能。 "creative" photoshop 部门制作了这张图片，之前它只是一个从 1 到 5 种颜色渐变的渐变。他们仍然这样做，但他们现在如何在它上面有一个白色的圆圈。我怎么会去完成这个。示例语法没有确切的定位。在白色圆圈的顶部，我需要添加特定的字体和文本 "in the white"

非常感谢。

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 只是确保文本在圆圈中居中。

CSS3径向渐变

CSS3 radial gradient

html

css

radial-gradients

css-gradients