独立于父元素设置子元素的不透明度

Question

我使用以下代码设置了 fiddle ：

html:

<div id="content">
    <input id="splash_button" type="button" value="Splash!" />
    <p>OSEIFNSEOFN SOE:NF:SOERNG :SOJld;kkng d;ljrng so;ern gsejng ;seorjse;ongsod;jng;s jdg;ske\ ;sej se gdsrgn sd;orjngsd;oj go;ser o;s en;o jnse;orng;sekorg ;ksjdr ;kgsjurd; gjnsdrgj; s ;hg;kuhg k;sgksdgblsregilsebnvsfdnv sa;kljg ;khg ;zkljdng ;kjsgr; unbzsd;kjgb zk;j xcnbv;kjzb ;kjgrb snbz;gkljznbs;d,jbnzs;dkjvbz;sljbd ;zksjn ;kzjsbng ;kjsbk;zejr ;kgsjg ;kzsjbr ;kjszrb ;zkojg ;oszkrg ;ozsrb;ouszb </p>
</div>

css:

#content{
    z-index: 0;
}

javascript(jquery):

$('#splash_button').click(function(){
    $('#content').append($('<div id="splash"><a id="hideSplash">hide</a></div'));

    // display splash window
    var splash_width = 200;
    var splash_height = 200;
    $('#splash').css({
        'z-index': 1,
        'width': splash_width + 'px',
        'height': splash_height + 'px',
        'position': 'absolute',
        'left': Math.floor(($(window).width() - splash_width)/2) + 'px',
        'top': Math.floor(($(window).height() - splash_height)/2) + 'px',
        'z-index': 1,
        'border': '1px solid',
        'background-color': '#99ccff',
        'opacity': '1.0'
    });

    // set the content's opacity and disabled the input button
    $('#content')
        .css({
            'opacity': '0.4'
        })
        .children()
            .attr('disabled', 'disabled');

    // when everything's over, reset properties
    $('#hideSplash').click(function(){
        $('#splash').remove();
        $('#content')
            .css({
                'opacity': '1.0'
            })
            .children()
                .removeAttr('disabled');
    });
});

我期望启动 div 的不透明度为 1，内容 div 的不透明度为 0.4，但是，单击按钮后，两个 div 的不透明度均为 0.4。

非常感谢任何帮助。

Answer 1

您应该将#splash 附加到正文或#content 之外的另一个div。

当你在 css 中为一个元素设置不透明度时，他的所有子元素都具有相同的透明度。
在您的示例中，#splash 的不透明度为 0.4，就像 #content 一样。

尝试 $('body').append 而不是 $('#content').append