Span style gradient not working

时间:2015-06-30 13:35:34

标签: html css css3 gradient

I was using this code for VIP players on my game to show their username in Gradient on Online Player list.

<span class="gradient#000000#FFFFFF"style="background: url(http://example.com/img/grad/1.gif)">Cruz</span>

But from past 2 weeks, span class=gradient is not working. Is that outdated or something like that? I even tried span class="fingradient" but no luck.

The usernames used to look like this:

screenshot of working version

Now background image is working but gradient is not working.

1 个答案:

答案 0 :(得分:0)

对不起,我忘了在新布局中滚动渐变java脚本。这就是它无法正常工作的原因。如果有其他人想要使用它。 这是JS的代码。

/*<![CDATA[*/

function SpanGradient(teamgradient){
 var spans=document.getElementsByTagName('SPAN');
 for (var txt,s,ss,c,z0=0;z0<spans.length;z0++){
  if (spans[z0].className){
   s=spans[z0].className.split('#');
   if (s[0]=='gradient'){
    spans[z0].className = "fingradient"; 
    txt=spans[z0].innerHTML.split('');
    c=zxcGradient(s[1],s[2],txt.length)
    spans[z0].innerHTML='';
    for (var z0a=0;z0a<txt.length;z0a++){
     ss=document.createElement('SPAN');
     ss.appendChild(document.createTextNode(txt[z0a]));
     ss.style.color='rgb('+c[z0a][0]+','+c[z0a][1]+','+c[z0a][2]+')';
     spans[z0].appendChild(ss);
    }
   }
  }
 }
}

function zxcGradient(srt,fin,nu){
 var scol=zxcHexRGB(srt);
 var fcol=zxcHexRGB(fin);
 var ary=[[scol[0],fcol[0]],[scol[1],fcol[1]],[scol[2],fcol[2]]]
 var rgbinc=[(ary[0][1]-ary[0][0])/nu,(ary[1][1]-ary[1][0])/nu,(ary[2][1]-ary[2][0])/nu];
 for (var rgb=[],z0=0;z0<nu;z0++){
  rgb[z0]=[];
  for (var z0a=0;z0a<3;z0a++)
   rgb[z0][z0a]=Math.max(Math.round(ary[z0a][0]+rgbinc[z0a]*z0),0);
 }
 return rgb;
}

function zxcHexRGB(hex){
 hex=hex.replace('#','');
 return [parseInt(hex.substring(0,2),16),parseInt(hex.substring(2,4),16),parseInt(hex.substring(4,6),16)];
}

SpanGradient();

/*]]>*/