자바 스크립트로 방사형 그래디언트 설정

Question

JS에 배경으로 div에 방사형 그래디언트를 설정하려고합니다. 그라디언트를 중간에서 0.8 불투명으로 시작하고 불투명도가 0이되어 가장자리로 이동하면 부드러운 페이딩 효과가 발생합니다. 나는 몇 가지 시도를했지만 일부는 전혀 작동하지 않았고 일부는 내가 원하는만큼 좋지 않았다.

arrCircleDivs[i].firstChild.style.backgroundImage = 
    '-webkit-radial-gradient(center,rgba('+r+','+g+','+b+',0.8), 
    rgba('+r+','+g+','+b+',0.8),rgba('+r+','+g+','+b+',0.8),rgba('+r+','+g+','+b+',0.7),rgba('+r+','+g+','+b+',0.6),rgba('+r+','+g+','+b+',0.5),rgba('+r+','+g+','+b+',0.4), 
    rgba('+r+','+g+','+b+',0.3),rgba('+r+','+g+','+b+',0.2), 
    rgba('+r+','+g+','+b+',0.1),rgba('+r+','+g+','+b+',0))'; 

그리고이 사람이 전혀 작동하지 않았다 : 나는 많은 rgba 정의와 적용 0.1 스톱 불투명도를 줄이기 위해 시도 할 때

일을 한,하지만 아주 좋은했다 :

Uncaught SyntaxError: Unexpected token ILLEGAL

012 :

arrCircleDivs[i].firstChild.style.backgroundImage = '-webkit-radial-gradient 
    (center, circle cover, rgba(30,87,153,0.7) 0%,rgba(30,87,153,0) 100%); 

arrCircleDivs[i].firstChild.style.backgroundImage = '-webkit-gradient 
    (radial, center center, 0px, center center, 100%, color-stop(0%,rgba(30,87,153,0.7)), 
    color-stop(100%,rgba(30,87,153,0))); 

나는 다음과 같은 오류 메시지를 받았습니다

JS와 같은 효과를 설정할 수있는 방법이 있습니까?

Answer 1

왜 JS를 사용합니까?

더 나은 방법은 .new-gradient-class와 같은 'arrCircleDivs [i] .firstChild'클래스를 추가하는 것입니다.

그런 다음 실제 CSS에서이 클래스를 사용하여 원하는 그라디언트를 설정합니다.

Answer 2

CSS를 사용하여 만들 수 있습니다. 플랫폼 간 일관성을 보장하기 위해 모든 브라우저 확장 호출을 사용하고자 할 것입니다.

방사형 그래디언트를 만들려면 최소한 두 개의 색상 정지 점을 정의해야합니다. 방사형 그라디언트의

예 :

방사형 그라디언트 구문

background: radial-gradient(shape size at position, start-color, ..., last-color); 
By default, shape is ellipse, size is farthest-corner, and position is center. 

방사형 그라데이션 - 일정한 간격으로 색상 중지 (이 기본입니다)

Exampl 균등 색 E

방사형 그라데이션 중지 :

#grad { 
    background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */ 
    background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */ 
    background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */ 
    background: radial-gradient(red, green, blue); /* Standard syntax */ 
}