Question

我尝试使用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服务器，所以我可以根据需要测试代码。

Answer 1

我很抱歉，如果这不是您需要的方向，但是有没有理由您不会只创建一个具有渐变背景的单个DIV（相对于具有纯背景的“x”个div）？我理解是否是这种情况，但我认为我会提供CSS3渐变的替代方案。否则，似乎Leigh的建议会起作用。

对于这个例子，我使用了你的代码，因为它看起来你想要一个红色（255,0,0）到蓝色（0,0,255）渐变。我调整了代码并在Safari（5.1.5），Chrome（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 Gradient Generator，因为它会生成你需要的CSS用于在浏览器中获取渐变效果。

Answer 2

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

1）将CFOUTPUT放在较大的块上以使其更具可读性：

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

2）我使用Hostek.com进行ColdFusion托管。他们拥有令人敬畏的账户，每月只需5美元。你可以得到CF8 / 9/10。这是一种很便宜地测试ColdFusion东西的好方法。

Answer 3

<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>

颜色渐变（ColdFusion）

3 个答案: