javascript - 更改div背景图片的不透明度

我有一个带有一些文本和背景图像的DIV。我想减少背景图像的不透明度。但是，当我将不透明度应用于DIV时，它会影响DIV中的文本。如何在不更改DIV中文本的不透明度的情况下更改背景图像的不透明度？

我有这个代码来自另一个关于stackoverflow的问题，我使用它减少了另一个div的不透明度，但是我不知道如何修改它以解决上述问题。

function convertHex(hex,opacity){
hex = hex.replace('#','');
r = parseInt(hex.substring(0,2), 16);
g = parseInt(hex.substring(2,4), 16);
b = parseInt(hex.substring(4,6), 16);

result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
return result;
}


$(".add_to_cart_button").click(function() {

$(".cart-contents").css("background-color",convertHex('#f47d32',40));
});

最佳答案

第一步是将z-index: -1;和position: relative;添加到您的back div CSS中：

更改不透明度背景的方法：

$("#backDiv").css("opacity", "0.4");
$("#backDiv").css({ opacity: 0.4 });
$("#backDiv").fadeTo("slow", 0.4);
$("#backDiv").fadeTo(1000, 0.4); // fist parameter is animate time in ms

测试按钮可能会在动画之后执行一些操作：

$("#buttonTest").click(function() {
  $("#backDiv").fadeTo("slow" , 0.4, function() {
    // Animation complete. You can add some action.
  });
});

希望对您有帮助...

祝好运！

关于javascript - 更改div背景图片的不透明度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39603083/