Wie kann man mit CSS einen mehrfarbigen Text erstellen, wie im Bild unten?Text mit mehreren Farbverläufen in CSS
Der Text irgendwie Farben zufällig differents verwendet, und ich möchte etwas machen, die gleich aussieht. Dies ist von einem Bild, so kann ich nicht einfach im Quellcode der Seite nach der Antwort suchen.
Danke für Ihre Hilfe! :)
Ich denke, das ist ein Duplikat How do I use a gradient as a font color in CSS?
Auch diese Website. Sie haben tolle CSS-Tipps. Dieser Artikel bezieht sich auf Ihre Frage. https://css-tricks.com/snippets/css/gradient-text/
Hier ist der Code von der Website.
WebKit verwenden, können Sie tun
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Es scheint jedoch, dass es nicht in Firefox unterstützt wird.
.gradient2:before {
background: rgba(0, 0, 0, 0) radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670) repeat scroll 0 0;
content: "";
display: block;
mix-blend-mode: screen;
}
.gradient2:before, .gradient2:after {
bottom: 0;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
.gradient2:after {
background: #04161f none repeat scroll 0 0;
color: white;
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, aut.";
mix-blend-mode: multiply;
}
.gradient2 {
background: white none repeat scroll 0 0;
color: black;
margin: 1em auto;
position: relative;
text-align: center;
text-shadow: 1px 1px 0 #04161f, 1px -1px 0 #04161f, -1px -1px 0 #04161f, -1px 1px 0 #04161f;
width: 10em;
}<body>
<p class="gradient2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, aut.</p>
</body>sehen diese http://cssdeck.com/labs/hmsqyqtx ich denke, es wird für Sie arbeiten
Hallo, ich weiß nicht, ob es Antworten genau das, was Sie wollen, aber scheint auf Ihre Frage bezogen werden : http://stackoverflow.com/questions/7261680/set-background-image-for-font-color und einer der Antworten Links zu einer Seite mit diesem: http://webdesignerwall.com/tutorials/css-gradient- Text-Effekt – zelite
Fragen, die uns auffordern, ein Buch, ein Werkzeug, eine Softwarebibliothek, ein Plug-in, ein tu zu empfehlen, zu finden oder zu empfehlen torial oder andere Off-Site-Ressource sind Off-Topic für Stack Overflow Stack Overflow –
Dies ist besser mit SVG getan, siehe http://stackoverflow.com/questions/8005447/cross-browser-text-gradient-in-pure-css -ohne-Verwendung-Hintergrundbild –