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个问题。

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

Answer 1

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

编辑：

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

Answer 2

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

但是，正如@Papa所指出的，您可以编辑元素的背景颜色不透明度值，而不会影响任何子元素的不透明度值。以下是使用this SO答案如何使用jQuery的示例。

// 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，以便它们看起来像是在sudo前面父div。

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

2 个答案: