2015-01-02 2 views
0

RGBA 생성기를 만들려고합니다. 이 코드를 사용했지만 불행하게도 RGB 대신 RGB에 대한 것이므로 불투명도 속성을 추가하는 방법을 모르겠습니다. 그럼이 일을 도와 줄 수 있니? 여기에 내가 코드를받은 사이트는 다음과 같습니다 http://jqueryui.com/slider/#colorpickerRGBA 생성기에 문제가 있습니다.

<script> 
function hexFromRGB(r, g, b) { 
    var hex = [ 
     r.toString(16), 
     g.toString(16), 
     b.toString(16) 
    ]; 
    $.each(hex, function(nr, val) { 
     if (val.length === 1) { 
      hex[nr] = "0" + val; 
     } 
    }); 
    return hex.join("").toUpperCase(); 
} 

function refreshSwatch() { 
    var red = $("#red").slider("value"), 
     green = $("#green").slider("value"), 
     blue = $("#blue").slider("value"), 
     hex = hexFromRGB(red, green, blue); 
    $("#swatch").css("background-color", "#" + hex); 
} 
$(function() { 
    $("#red, #green, #blue").slider({ 
     orientation: "horizontal", 
     range: "min", 
     max: 255, 
     value: 127, 
     slide: refreshSwatch, 
     change: refreshSwatch 
    }); 
    $("#red").slider("value", 255); 
    $("#green").slider("value", 140); 
    $("#blue").slider("value", 60); 
}); 
</script> 
+0

이 작업을 수행하는 여러 가지 방법 많은; 그러나 가장 좋은 방법은이 솔루션에 대한 전체 접근 방식을 변경하고 [rgba() function] (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba ()). 또 다른 방법은 [CSS 불투명도 속성] (https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)을 사용하는 것입니다. – charles

답변

0

당신은 색상을 다시 계산하지 않아야합니다. CSS 색상 rgb(), rgba()의 기능, hsl()을 이해 할 수

$("#swatch").css("background-color", "rgb(" + red + "," + green + "," + blue + ")");