我可以使用CSS3/HTML5在文字上使用水平多個顏色漸變嗎？

我試圖用CSS 3樣式替換當前在網站上使用的基於sIFR的閃光效果。我有使用CSS 3的文本漸變效果，但原始的sIFR實現具有多種顏色，而不僅僅是一種顏色的簡單漸變。我可以使用CSS3/HTML5在文字上使用水平多個顏色漸變嗎？

有人能給我提供一個例子，使用沿水平軸的多種顏色對文本元素（如H2）進行造型嗎？

謝謝，布賴恩。

2011-04-12 Brian Scott

enter image description here

下面是示例SVG代碼 - 與FF4，Safari瀏覽器5和Chrome測試。請注意，您必須將其作爲Safari的XHTML頁面來呈現。這應該也適用於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>

來源

2011-04-14 18:22:54

這不是CSS3 – Blowsie 2011-04-15 07:42:39

@Blowsie：沒錯，但是解釋/迴應已經從最初的請求擴展到一旦澄清CSS3不會提供所需的內容。我已經更新了原始問題以糾正此問題。 – 2011-04-15 08:15:14

據我知道這是唯一可能的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

來源

2011-04-12 12:05:25 Blowsie

我嘗試的精神加強和改進代碼，我的結果：http://jsfiddle.net/DoubleYo/qGfzm/我已經嘗試用'-webkit-面具image'但你只能更改不透明度的梯度。 – DoubleYo 2011-04-12 12:15:06

@DoubleYo：感謝您抽出時間，您的演示目前看起來不錯。這絕對只能在webkit瀏覽器中使用嗎？ – 2011-04-12 12:16:47

@DoubleYo您的示例與我的看起來沒有任何區別，說實話，@Brian Scott Im 99％肯定只有webkit有一個CSS唯一的解決方案 – Blowsie 2011-04-12 13:06:23

我可以使用CSS3/HTML5在文字上使用水平多個顏色漸變嗎？

回答

相關問題