CSS3 radialen Gradienten

Question

Ich muss wissen, ob das überhaupt möglich ist. Die "kreative" Photoshop-Abteilung kommt mit diesem Bild, und vorher war es nur ein Farbverlauf von 1 bis 5 Farben. Sie machen das immer noch, aber sie sehen jetzt wie ein weißer Kreis darüber. Wie würde ich das überhaupt erreichen? Die Beispiel-Syntax hat keine exakte Positionierung. Oben auf dem weißen Kreis muss ich bestimmte Schriftart und Text „in der weißen“

Vielen Dank im Voraus hinzuzufügen.

Answer 1

Es könnte einfacher sein, mit mehreren überlagerten Farbverläufen als Hintergrund zu gehen.

Der erste ein einfacher linearer Gradient von links nach rechts und ein zweiter radialer Gradient oben.

Dann ist es nur eine Frage der Positionierung (absolut) Ihr Textelement über dem weißen Kreis (erinnern Sie wissen, wo es positioniert)

A quick and dirty Demo:

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>

Hinweis: wie die Positionierung der radialen Gradientenmitte ist die gleiche wie die Positionierung der <span>. Die transform sorgt nur dafür, dass der Text im Kreis zentriert ist.