Javascript 更改上的页面不透明度。单击jquery

假设我的页面有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个问题

#注册文本主页也将获得不透明度层。它嵌套在#主站点标题中

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

如果更改具有子元素的元素的不透明度，它们都将受到影响

您可以在背景色中使用rgba的不透明度部分，如下所示：

rgba（0,0,0,0.1）

。最后一个值是颜色的不透明度

编辑：

---

如果更改元素的不透明度值，其所有子元素也将应用相同的不透明度值

但是，正如@Papa所指出的，您可以编辑元素的背景色不透明度值，而不会影响子元素的任何不透明度值。下面是一个如何使用jQuery的示例，这要感谢SO answer

// Some randomly selected colour value
var color = '#abcdef';
var rgbaCol = 'rgba(' + parseInt(color.slice(-6,-4),16)
    + ',' + parseInt(color.slice(-4,-2),16)
    + ',' + parseInt(color.slice(-2),16)
    +',0.5)'; // This colour value will be at half opacity.
$('div').css('background-color', rgbaCol)

---

否则，如果您希望父级

div

中的文本和其他元素也褪色，那么您必须创建具有绝对位置的单独

div

s，以便它们看起来像是在sudo父级

div

前面，将bgcolor添加到$（“#主站点标题”）.css（“不透明度”）的正确语法是什么.fadeIn（300，函数（）{我会使用animate而不是fadeIn。将RGB值更改为suite。

// Some randomly selected colour value
var color = '#abcdef';
var rgbaCol = 'rgba(' + parseInt(color.slice(-6,-4),16)
    + ',' + parseInt(color.slice(-4,-2),16)
    + ',' + parseInt(color.slice(-2),16)
    +',0.5)'; // This colour value will be at half opacity.
$('div').css('background-color', rgbaCol)