CSS3放射グラデーション

Question

これが可能であるかどうかを知る必要があります。 「創造的な」フォトショップ部門は、このイメージを思い描いています。それ以前は、1から5色のグラデーション・フェーディングの前でした。彼らはまだこれをしますが、彼らはそれの上にどのように白い円があります。どのように私はこれを達成するために行くだろう。例の構文には正確な位置付けがありません。白丸の上に私が

「白で」事前に多くの感謝を特定のフォントやテキストを追加する必要があります。

Answer 1

複数のオーバーレイグラデーションを背景として使用する方が簡単かもしれません。

最初のものは、左から右への単純な線形勾配、および上からの第2の放射状勾配です。

はそれからポジショニングの問題だ（絶対）白丸（あなたはそれが配置されています場所を知る覚えている）の上にテキスト要素

迅速かつ汚いデモ：

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は、テキストが円の中央に配置されるようにします。