颜色渐变（ColdFusion）

我试图使用ColdFusion生成颜色渐变。我目前的代码工作，但它基本上只会显示开始颜色，直到最后一行，然后它会显示结束颜色。没有渐变。只有一大块红色，然后是一条蓝色。我的代码没有看到什么错误？颜色渐变（ColdFusion）

<cfset BoxNumber = RandRange(100,1000) > 

<cfset Start_Red = 255 > 
<cfset Start_Green = 0 > 
<cfset Start_Blue = 0 > 

<cfset End_Red = 0 > 
<cfset End_Green = 0 > 
<cfset End_Blue = 255 > 

<div id="color-band"> 

<cfloop index = "i" from = 0 to = #BoxNumber# > 

<cfset Percent = i \ (BoxNumber - 1) > 

<cfset Red = int(((End_Red - Start_Red) * Percent) + Start_Red) > 
<cfset Green = int(((End_Green - Start_Green) * Percent) + Start_Green) > 
<cfset Blue = int(((End_Blue - Start_Blue) * Percent) + Start_Blue) > 

<div style="background-color:rgb(<cfoutput>#Red#</cfoutput>, <cfoutput>#Green# </cfoutput>, <cfoutput>#Blue#</cfoutput>)">&nbsp;</div> 

</cfloop> 

</div>

我确实知道ColdFusion服务器有时候很难得到，所以如果需要的话我可以测试代码。

来源

2012-04-02 John Ayers

<cfset Percent = i \ (BoxNumber - 1) > 
... 
<cfset Red = int(((End_Red - Start_Red) * Percent) + Start_Red) >

的至少一个问题是percent式返回零（0）的大部分时间。所以颜色不会增加，因为代码只是将0添加到起始值。我认为颜色公式也是关闭的。

除非这是一个学习练习，否则您可能需要寻找现有的功能或方法，而不是重新发明轮子。 （编辑：例如，看看克雷格的建议）。否则，你可以看看cflib.org的灵感。函数fadeList显示了生成渐变（尽管使用十六进制）的基本概念。这是不完全正确的，但这些方针的东西

...  
<cfset RedOffset = (Start_Red - End_Red)/BoxNumber> 
<cfset GreenOffset = (Start_Green - End_Green)/BoxNumber> 
<cfset BlueOffset = (Start_Blue - End_Blue)/BoxNumber> 

<div id="color-band"> 
<cfloop index="i" from="0" to ="#BoxNumber#"> 
    <cfset Red = int(Start_Red - (RedOffset * i))> 
    <cfset Green = int(Start_Green - (GreenOffset * i))> 
    <cfset Blue = int(Start_Blue - (BlueOffset * i))> 
    <cfoutput> 
    <div style="height: 5px; background-color:rgb(#Red#, #Green#, #Blue#)">&nbsp;</div> 
    </cfoutput> 
</cfloop> 
</div>

来源

2012-04-02 19:58:25 Leigh

我没有你的答案，但我确实有两点建议。

1）把你CFOUTPUTs围绕一个更大的块，以使其更易于阅读：

<cfoutput> 
    <div style="background-color:rgb(#Red#, #Green#, #Blue#)">&nbsp;</div> 
</cfoutput>

2）我用Hostek.com ColdFusion的托管。他们拥有每月仅5美元的真棒账户。你可以得到CF8/9/10。这是测试ColdFusion东西便宜的好方法。

来源

2012-04-02 19:17:35

或尝试http://www.hostmediauk.com。他们有免费的Railo账户和非常便宜的设置费用。他们也有便宜的CF服务。 – 2012-04-02 19:33:31

我的道歉，如果这不是你需要前往的方向，但有没有你不会只是创建一个渐变背景的单一DIV任何原因（与“ x“具有坚实背景的div数量）？我明白如果是这样的话，但我认为我会提供CSS3渐变的替代方案。否则，似乎Leigh的建议会奏效。

对于这个例子，我使用你的代码，因为它看起来像你想要一个红色（255,0,0）到蓝色（0,0,255）渐变。我调整的代码，并在Safari（5.1.5），铬（19.x）和FireFox运行它（12）：

<cfset Start_Red = 255 > 
<cfset End_Blue = 255 > 
<html> 
    <cfoutput> 
    <head> 
     <title>Color Gradient Test</title> 
     <style type="text/css"> 
      .my_gradient{ 
       background: ##ff0000; 
       background: -moz-linear-gradient(top, rgb(#Start_Red#, 0, 0) 0%, rgb(0,0,#End_Blue#) 100%); 
       background: -webkit-gradient(linear, left top, left bottom, from(rgb(#Start_Red#, 0, 0)), to(rgb(0,0, #End_Blue#)));" 
      } 
     </style> 
    </head> 
    <body> 
     <div id="color-band">  
     <div class="my_gradient">&nbsp;</div>  
     </div> 
    </body> 
    </cfoutput> 
</html>

上面仅创建一个红色（255,0,0），以蓝色（ 0,0,255）渐变，但ColorZilla.com有一个很好的CSS渐变发生器，因为它会生成您需要用来在浏览器中获得渐变效果的CSS。

来源

2012-04-02 20:05:39

+1。是的，我更喜欢重新发明轮子（除非有一个特定的原因，他们必须手动完成）我不确定这个目标 – Leigh 2012-04-02 20:16:43

我也不确定，Leigh。我想也许OP有一些浏览器兼容性问题，没有说出来。我想到了两种方法，他会到达那里:)！ – 2012-04-02 20:46:16

这是一个很好的答案，而不是我想如何去做。 – 2012-04-03 00:12:46

颜色渐变（ColdFusion）

回答

相关问题