文本的彩虹色

Question

文本的彩虹色

3

.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中文字是透明的。我尝试过进行调整，但没有成功。有人可以帮忙吗？ :P?

- Prost Sunt

1

你的问题不够清晰，请添加更多细节和完整的代码示例。谢谢。 - j08691

尝试添加-moz-gradient了吗？ - daniel0mullins

@user1129884 - 如果您查看帖子的编辑历史记录，您会注意到原帖作者添加了我所要求的细节。 - j08691

1

简而言之，你不能这样做。-webkit-background-clip: text 是 Webkit 特有的功能，不是标准属性/值。根据规范，background-clip 的可接受值为 border-box、padding-box 和 content-box。 - Hashem Qolami

@Prost Sunt 我已经编辑了我的回答，并提供了一个可行的 SVG 代码，现在应该能够满足你的问题。 - Rod

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rod · Accepted Answer

编辑2

在Yoksel的codepen上找到了一个解决方案，使用SVG绘制了一个200x200的彩虹渐变图案，然后将其应用于文本作为填充。

<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，所以我误解了你的问题。

你正在使用的这种效果是Webkit独有的，在Firefox上没有与-webkit-background-clip: text;相对应的东西。