本文介绍了仅更改背景颜色的Alpha通道的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

嘿伙计们我正在尝试仅更改div元素的背景颜色中的alpha通道(使用滑块)。但我不知道该怎么做。这是我的代码:

  $(function(){
$(#slider).slider({
范围:min,
值:50,
min:0,
max:100,
slide:function(event,ui){
//滑动时,更新alpha div元素中的值
$('#idOfMyDiv')。css('background',rgb(,,, ui.value)); //我不知道在这做什么
}
});
});


解决方案

  1. 获取当前背景颜色,

  2. 将其解析为r,g,b

  3. 创建新的rgba颜色字符串

  4. 更改新的rgba颜色字符串的背景颜色。

像这样:

  var newAlpha = 0.50; 

var bg = $('#idOfMyDiv')。css('backgroundColor');

var a = bg.slice(4).split(',');

var newBg ='rgba('+ a [0] +','+ parseInt(a [1])+','+ parseInt(a [2])+','+ newAlpha + ')';

$('#idOfMyDiv')。css('backgroundColor',newBg);

示例代码和演示:



  var newAlpha = 0.50; var bg = $('body')。css('backgroundColor'); var a = bg.slice(4)。 split(','); var newBg ='rgba('+ a [0] +','+ parseInt(a [1])+','+ parseInt(a [2])+','+ newAlpha +' )'; $('body')。css('backgroundColor',newBg);  
  body {background-color:orange; }  
 < script src =https:// ajax .googleapis.com / AJAX /库/ jquery的/ 1.9.1 / jquery.min.js>< /脚本>  


Hey guys I'm trying to change only the alpha channel in the background-color of a div element(using a slider). But I don't know how to do It. Here is my code:

$(function() {
    $( "#slider" ).slider({
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function( event, ui ) {
            // While sliding, update the value in the alpha div element
            $('#idOfMyDiv').css('background', rgb(,,,ui.value) ); //I don't know what to do here
        }
    });
});
解决方案
  1. Fetch the current background color,
  2. Parse it into r,g,b
  3. Create a new rgba color string
  4. Change the background color to the new rgba color string.

Like this:

var newAlpha=0.50;

var bg=$('#idOfMyDiv').css('backgroundColor');

var a=bg.slice(4).split(',');

var newBg='rgba('+a[0]+','+parseInt(a[1])+','+parseInt(a[2])+','+newAlpha+')';

$('#idOfMyDiv').css('backgroundColor',newBg);

Example code and a Demo:

var newAlpha=0.50;
var bg=$('body').css('backgroundColor');
var a=bg.slice(4).split(',');
var newBg='rgba('+a[0]+','+parseInt(a[1])+','+parseInt(a[2])+','+newAlpha+')';
$('body').css('backgroundColor',newBg);
body{ background-color: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

这篇关于仅更改背景颜色的Alpha通道的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-03 23:50
查看更多