顏色漸變（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）

回答

相關問題