CSS中具有多個顏色漸變的文本
[英]Text with multiple color gradient in CSS
問題描述
如下圖所示，如何使用CSS創建多色文本？
文本使用某種方式隨機不同的顏色，我想做一些看起來一樣的東西。 這是從圖片中獲得的，所以我不能只在頁面的源代碼中尋找答案。
謝謝你的幫助！ :)
3 個解決方案
解決方案1
0 2016-06-09 12:15:23
我認為這是我如何在CSS中使用漸變作為字體顏色的副本？
另外，請訪問此網站。 他們有很棒的CSS技巧。 本文與您的問題有關。 https://css-tricks.com/snippets/css/gradient-text/
這是網站上的代碼。
使用WebKit，您可以
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
但是，似乎Firefox不支持它。
解決方案2
0 2016-06-09 12:25:25
.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>
解決方案3
0 2016-06-09 13:19:41
看到這個http://cssdeck.com/labs/hmsqyqtx，我認為它將為您服務
從 css 漸變中選擇顏色用於着色文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.