색상 그라디언트 (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을 추가하기 만하므로 색상이 증가하지 않습니다. 나는 색깔 공식이 또한 꺼져 있다고 생각한다.

학습 과제가 아니라면 바퀴를 다시 만들지 않고 기존 기능이나 방법을 찾아 볼 수 있습니다. (편집 : 예를 들어, Craig의 제안을 살펴보십시오.) 그렇지 않으면 영감을 얻기 위해 cflib.org를 살펴보십시오. fadeList 함수는 그래디언트를 생성하는 기본 개념을 보여줍니다 (16 진수 임에도 불구하고). 이것이 바로 바로 아니지만,이 라인을 따라 뭔가

...  
<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) 내가 ColdFusion에서 호스팅 Hostek.com를 사용합니다. 한 달에 5 달러 정도의 저렴한 계정이 있습니다. CF8/9/10을 얻을 수 있습니다. ColdFusion을 저렴하게 테스트 할 수있는 좋은 방법입니다.

출처

2012-04-02 19:17:35

또는 http://www.hostmediauk.com을 사용해보십시오. 그들은 무료 Railo 구좌와 매우 저렴한 설치비를 가지고 있습니다. 그들은 또한 저렴한 CF 서비스를 제공합니다. –

나의 사과이 당신 머리에 필요로하는 방향이 아니라 그냥 그라데이션 배경 하나의 DIV를 만들만한 이유가있는 경우 (대 " x "단색 배경의 div 수)? 나는 그것이 사실인지 이해하지만 CSS3 그라디언트 측면에서 대안을 제시 할 것이라고 생각했습니다. 그렇지 않으면 Leigh의 제안이 효과가있는 것처럼 보입니다.

이 예제에서는 빨간색 (255,0,0)에서 파란색 (0,0,255)까지의 그라디언트를 원하는 것처럼 보이는 코드를 사용했습니다. 나는 (12) 코드를 쥐게 사파리 (5.1.5), 크롬 (19.x)와 파이어 폭스에서 그것을 실행 :

<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

나도 잘 모르겠다. 나는 OP에 무언의 브라우저 호환성 문제가 있다고 생각했다. 나는 두 가지 접근 방식 사이에서 그가 거기에 도착할 것이라고 생각했습니다. :)! –

이것은 내가 해내려는 시도가 아닌 훌륭한 대답이었습니다. –

색상 그라디언트 (ColdFusion)

답변

관련 문제