使用RGBa更改div的背景不透明度

我正在嘗試使用jQuery UI滑塊更改div的背景不透明度。使用RGBa更改div的背景不透明度

用戶可以更改div的背景顏色，所以我需要知道如何只更改背景的alpha參數而不更改顏色。

這是到目前爲止我的代碼：

$('#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+')') 
       });

我需要一些如何改變只有currentColor變量的阿爾法一部分。我希望有一個人可以幫助我！ TIA

來源

2012-12-05 Ronny vdb

閱讀此plz http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/ –

我瞭解不透明度和rgba之間的差異。我想使用rgba，所以我不會影響div內容的不透明度 –

我設法從學習和適應的回答提出瞭解決這by @Tom Smilack，使用字符串操作。

我做了一個小的變化，使他的答案也適用於不具備阿爾法集最初的div工作，這裏是我使用的最終代碼：

$('#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); 

      });

感謝大家的建議和我希望這可以幫助人們想要相同的功能

來源

2012-12-05 15:33:49

試試這個：

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

Updated Example Here

來源

2012-12-05 14:25:53

嘿，對不起，我沒有正確解釋自己。代碼我有工作，但它設置背景顏色或白色，因爲這是代碼中設置（255,255,255）我想用用戶爲div設置的顏色替換它。希望這個更清楚 –

'element-active'是div的權利？ –

是的，這是我需要找出什麼是當前背景顏色的元素，然後使用滑塊更改它的不透明度使用RGBa –

字符串操作可能是最好的一段路要走：

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);

來源

2012-12-05 14:40:00

即使這已經解決了，也許我的小功能將幫助某人。作爲參數需要像$（「a」）的一個jQuery元件（已任一種RGB或RGBA背景色）和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+')'); 
}

你會使用這樣的：

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

最重要的部分是，<a>元件具有RGB或RGBA背景顏色已經設置。

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

來源

2014-10-29 14:36:03

-1

爲什麼你就是不切換與色彩和opacitty

$(myelement).toggleclass();

se the jquery api

來源

2015-09-24 00:28:23 GoAntonio

他想「滑動」（不切換）不透明！ – Ruwen

只是爲了我

一類更容易理解的解決方案是由逗號和改變與最後一個元素分裂RGBA顏色新的不透明度值（當然，只適用於初始顏色爲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);

來源

2017-09-21 12:48:33 feeeper

使用RGBa更改div的背景不透明度

回答

相關問題