本文介绍了仅更改背景颜色的Alpha通道的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
嘿伙计们我正在尝试仅更改div元素的背景颜色中的alpha通道(使用滑块)。但我不知道该怎么做。这是我的代码:
$(function(){
$(#slider).slider({
范围:min,
值:50,
min:0,
max:100,
slide:function(event,ui){
//滑动时,更新alpha div元素中的值
$('#idOfMyDiv')。css('background',rgb(,,, ui.value)); //我不知道在这做什么
}
});
});
解决方案
- 获取当前背景颜色,
- 将其解析为r,g,b
- 创建新的rgba颜色字符串
- 更改新的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
}
});
});
解决方案
- Fetch the current background color,
- Parse it into r,g,b
- Create a new rgba color string
- 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通道的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!