Thay đổi độ mờ nền của div bằng cách sử dụng RGBa

Question

Tôi đang cố gắng thay đổi độ mờ nền của một div bằng cách sử dụng thanh trượt jquery ui.

Người dùng có thể thay đổi màu nền của div, vì vậy tôi cần biết cách tôi chỉ có thể thay đổi thông số alpha của nền mà không thay đổi màu.

Đây là mã của tôi cho đến nay:

$('#opacity-slider').slider({ min: 0, max: 1, step: 0.1, value: 1 }) 
       .bind("slidechange", function() { 
        //get the value of the slider with this call 
        var o = $(this).slider('value'); 

        var e = $('.element-active'); 
      var currentColor = $('.element-active').css('background-color');   
        $(e).css('background-color', 'rgba(255, 255, 255, '+o+')') 
       }); 

tôi cần phải một số cách thay đổi chỉ là phần alpha của biến currentColor. Tôi hy vọng ai đó có thể giúp tôi! TIA

Answer 1

tôi quản lý để giải quyết việc này bằng cách học từ và thích ứng với câu trả lời gợi ý bởi @Tom Smilack, sử dụng thao tác chuỗi.

tôi đã thực hiện một sự thay đổi nhỏ để câu trả lời của ông cũng sẽ làm việc cho các div mà không có alpha bộ ban đầu, đây là mã cuối cùng mà tôi đang sử dụng:

$('#opacity-slider').slider({ min: 0, max: 1, step: 0.1, value: 1 }) 
      .bind("slidechange", function() { 
       //get the value of the slider with this call 
       var o = $(this).slider('value'); 

       var e = $('.element-active'); 
       var currentColor = $('.element-active').css('background-color'); 
       var lastComma = currentColor.lastIndexOf(')'); 
       var newColor = currentColor.slice(0, lastComma - 1) + ", "+ o + ")"; 
       $(e).css('background-color', newColor); 

      }); 

Nhờ mọi người cho ý kiến ​​và Tôi hy vọng điều này sẽ giúp mọi người muốn cùng một tính năng như vậy

Answer 2

Hãy thử điều này:

var alpha = $(this).slider('value'); 
var e = $('.element-active'); 
$(e).css('background-color', 'rgba(255,255,255,' + alpha + ')');​ 

Updated Example Here

Answer 3

Chuỗi thao tác có thể là cách tốt nhất để đi:

var e = $('.element-active'); 
var currentColor = $('.element-active').css('background-color'); 
var lastComma = currentColor.lastIndexOf(','); 
var newColor = currentColor.slice(0, lastComma + 1) + o + ")"; 
$(e).css('background-color', newColor); 

Answer 4

Mặc dù điều này đã được giải quyết, nhưng chức năng nhỏ của tôi có thể giúp ai đó. Như một cuộc tranh cãi phải mất một yếu tố jQuery như $ ('a') (đã hoặc là RGB hoặc RGBA background-color) và một giá trị alpha từ 0 - 1.

function RGBA(e, alpha) { //e = jQuery element, alpha = background-opacity 
    b = e.css('backgroundColor'); 
    e.css('backgroundColor', 'rgba' + b.slice(b.indexOf('('), ((b.match(/,/g).length == 2) ? -1 : b.lastIndexOf(',') - b.length)) + ', '+alpha+')'); 
} 

Bạn sẽ sử dụng nó như thế này :

RGBA(jQuery('a'), 0.2); 

Phần quan trọng là phần tử <a> có màu nền rgb hoặc rgba.

<a href="#" style="background-color: rgb(100,10,50);">Sample</a> 

Answer 5

tại sao bạn chỉ không chuyển đổi một lớp với màu sắc và opacitty

$(myelement).toggleclass(); 

se the jquery api

Answer 6

Chỉ cần cho tôi giải pháp dễ hiểu hơn là tách màu rgba bởi dấu phẩy và thay đổi yếu tố cuối cùng với giá trị độ mờ mới (tất nhiên là chỉ hoạt động nếu màu ban đầu là rgba):

var newAlpha = $(this).slider('value'); 
// initial background-color looks like 'rgba(255, 123, 0, 0.5)' 
var initialBackgroundColor = $('.element-active').css('background-color'); 
var bgColorSeparated = initialBackgroundColor.split(','); 
// last element contains opacity and closing bracket 
// so I have to replace it with new opacity value: 
bgColorSeparated[3] = newAlpha + ')'; 
var newColor = bgColorSeparated.join(','); 
$('.element-active').css('background-color', newColor);