CSS3/HTML5能否实现文字的水平多色渐变？

Question

我想用CSS 3样式替换网站上目前使用的基于sIFR的flash效果。我已经成功地使用CSS 3实现了文本渐变效果，但原始的sIFR实现具有多种颜色，而不仅仅是简单的颜色到下一个颜色的渐变。

有人能够给我提供一个示例，演示如何使用多种颜色沿水平轴来设计文本元素，例如H2吗？

谢谢， Brian。

- Brian Scott

Answer 1

据我所知，这只有在webkit中才能实现。

h1 {
  font-size: 72px;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.03, rgb(250,3,3)),
    color-stop(0.52, rgb(240,255,127)),
    color-stop(0.76, rgb(42,24,173)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

http://jsfiddle.net/gEGHq/1

- Blowsie

---

@DoubleYo，老实说，你的例子看起来和我的没有什么不同。@Brian Scott，我99%确定只有Webkit有一个纯CSS的解决方案。 - Blowsie

我只是改变了渐变的起点和终点颜色，将它们固定在0%和100%。同时，我将元素的显示方式设置为inline-block，以使得渐变的末尾与文本的末尾对齐。 - Yoann

很好的变化，我不知道他们在做什么。 - Blowsie

你可以使用SVG文本在FF4中获得相同的效果。 - Michael Mullany

@Michael：如果您提供一些带有渐变的示例SVG代码，我将接受它作为答案。此外，您是否知道如何将foreignObject纳入非SVG浏览器的向后兼容性？ - Brian Scott

Answer 2

这是一个示例SVG代码 - 经过FF4、Safari 5和Chrome测试。请注意，您必须将其作为XHTML页面提供给Safari进行呈现。这也应该适用于IE9，但我没有测试过。

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1">

  <defs
     id="FooDefs">
    <linearGradient
       id="MyFirstGradient"
       x1="400"
       y1="350"
       x2="400"
       y2="420"
       gradientUnits="userSpaceOnUse">
      <stop
         id="stop1"
         style="stop-color:#1acf86;"
         offset="0" />
      <stop
         id="stop2"
         style="stop-color:#ff0051;"
         offset="0.25" />
      <stop
         id="stop3"
         style="stop-color:#1da1c9;"
         offset="0.625" />
      <stop
         id="stop4"
         style="stop-color:#e45f25;"
         offset="1" />
    </linearGradient>
  </defs>
    <text
         x="150"
         y="420"
         id="textBAR"
         style="font-size:72px;fill:url(#MyFirstGradient);">
BIG TEXT TEST
</text>
</svg>

- Michael Mullany

---

@Blowsie：没错，但是一旦澄清了CSS 3无法提供所需功能，解释/回复就从原始请求扩展开来了。我已经更新了原始问题以纠正这个问题。 - Brian Scott