javascript - 在 .click jquery 上更改页面不透明度

Question

假设我的页面有 4 个 div 元素，它们全部嵌套在彼此内部。我想在除最后一个嵌套元素之外的每个元素上方添加一个不透明度级别，当我输入 ex 的表单元素时触发。到目前为止我有这个:

$(window).load(function(e){
  $('#main-user-signup').on('click',function(e){
     $("#main-site-header").css("opacity",.1).fadeIn(300, function () {            
        $('#sign-up-text-home').css({'z-index':9999});
     });
   e.preventDefault();
   });
});

2个问题。

1. #sign-up-text-home 也获得了不透明层。它嵌套在#main-site-header 中。

2. 如何更改不透明层颜色而不是实际背景颜色。

Answer 1

1. 如果您更改具有子元素的元素的不透明度，它们都会受到影响。

2. 您可以像这样在背景色中使用 rgba 的不透明度部分:rgba(0, 0, 0, 0.1)。最后一个值是颜色的不透明度。

编辑:

$("#main-site-header").animate({
    background-color: rgba(0, 0, 0, 0.1),
}, 300, function() {
     // finish
});