文字的彩虹色 [英] Rainbow color for text

问题描述

.rainbowtext{ background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); 
color:transparent;
-webkit-background-clip: text;
background-clip: text;
font-weight: bold; }
<p class="rainbowtext">Hello! This should have rainbow coloring.</p>

我想使文本具有彩虹色.这段代码可以正常工作，但仅适用于Safari/Chrome，在Firefox中，文本是透明的.我尝试弄乱它，但没有成功.有什么帮助吗?

I want to make a text to have rainbow coloring. This code works fine but only with Safari/Chrome, in firefox the text is transparent. I've tried messing around with it with no success. Any help :P?

推荐答案

Edit2

在 Yoksel 的

Edit2

Found a solution on Yoksel's codepen using SVG that draws a 200x200 pattern with the rainbow gradient, and then is applied to the text as fill.

<div class="wrapper">
  <svg  width="350" height="25">
    <defs>
        <linearGradient id="rainbowGradient" x1="0" y1="0" x2="100%" y2="0%"> <!--20% spreadMethod="repeat"-->
          <stop offset="0%" stop-color="crimson" /><stop offset="10%" stop-color="purple" />
          <stop offset="10%" stop-color="red" /><stop offset="20%" stop-color="crimson" />
          <stop offset="20%" stop-color="orangered" /><stop offset="30%" stop-color="red" />
          <stop offset="30%" stop-color="orange" /><stop offset="40%" stop-color="orangered" />
          <stop offset="40%" stop-color="gold" /><stop offset="50%" stop-color="orange" />
          <stop offset="50%" stop-color="yellowgreen" /><stop offset="60%" stop-color="gold" />
          <stop offset="60%" stop-color="green" /><stop offset="70%" stop-color="yellowgreen" />
          <stop offset="70%" stop-color="steelblue" /><stop offset="80%" stop-color="skyblue" />
          <stop offset="80%" stop-color="mediumpurple" /><stop offset="90%" stop-color="steelblue" />
          <stop offset="90%" stop-color="purple" /><stop offset="100%" stop-color="mediumpurple" />
        </linearGradient>
      
        <pattern id="rainbow" 
                 patternUnits="userSpaceOnUse"
                 width="200" height="200" 
                 viewbox="0 0 200 200">
          <rect width="200" height="200"
                  fill="url(#rainbowGradient)"/>
        </pattern>
      </defs>
  
    <text x="0" y="50%" style="fill: url(#rainbow);">Hello! This has have rainbow coloring.</text>
  </svg>
</div>

具有讽刺意味的是，我在这里使用ff，所以我误解了您的问题.

Ironically enough I am using ff here, so I misunderstood your question.

您使用的这种效果是webkit独有的，firefox上没有与-webkit-background-clip: text;相对的

This effect that you are using is exclusive to webkit, there is no counterpart on firefox to -webkit-background-clip: text;

这篇关于文字的彩虹色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！