在.click jquery上更改页面不透明度答案

【问题标题】：changing page opacity on .click jquery在.click jquery上更改页面不透明度
【发布时间】：2014-03-25 10:28:03
【问题描述】：

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

#sign-up-text-home 也获得了不透明层。它嵌套在#main-site-header 中。
如何更改不透明度图层的颜色，而不是实际的背景颜色。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

如果更改不透明度的元素有子元素，它们都会受到影响。
您可以像这样在背景颜色中使用 rgba 的不透明度部分：rgba(0, 0, 0, 0.1)。最后一个值是颜色的不透明度。

编辑：

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

【讨论】：

将 bgcolor 添加到 $("#main-site-header").css("opacity",.1).fadeIn(300, function () {跨度>
我会使用动画而不是淡入淡出。将您的 RGB 值更改为套件。

【解决方案2】：

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

但是，正如@Papa 所指出的，您可以编辑元素的背景色不透明度值，而不会影响任何子元素的不透明度值。感谢this 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 中的文本和其他元素也消失，那么您将必须创建具有绝对定位的单独 divs，以便它们看起来像是在 sudo 父 div 前面.

【讨论】：