javascript - 如何控制全页半透明覆盖div顶部图像的css

Question

我在加载时有一个完整的页面覆盖覆盖我的页面。我附加到它的唯一脚本是在单击任何内容时关闭它。此叠加层的目的是为页面提供指导，因此我有一些透明的 .png 图像，我想将它们锚定到页面的不同区域。

我在下面列出了一个示例，我希望它具有完全的不透明度和距页面左上角的一些间距...但是当我加载它时，它设置为 0.4 透明度并卡在其中左上角。我不是 CSS 专家，而且我一直在研究这个。有人可以帮忙吗？

<script language="javascript" type="text/javascript">

    $(function () {

        var docHeight = $(document).height();

        $("body").append("<div id='overlay'><div id='home_text'><img src='/images/overlay_test_home.png'></div></div>");

        $("#overlay")
      .height(docHeight)
      .css({
          'opacity': 0.4,
          'position': 'absolute',
          'top': 0,
          'left': 0,
          'background-color': 'black',
          'width': '100%',
          'z-index': 5000
      });

        $("#home_text")
      .css({
          'opacity': 1.0,
           'top' : 20,
           'left': 200
      });

        $('#overlay').click(function () {
            $("#overlay").hide();
        });

    });

</script>

Answer 1

我会从 javascript 中删除所有 html 和 css，这将使其更易于维护。

这是你的CSS:

#overlay {
    background: rgba(0, 0, 0, .4);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

#home_text {
    background: red;
    height: 300px;
    margin: 20px auto 0;
    width: 300px;
}

在叠加层上，我将不透明度更改为 rgba，因为不透明度会影响内部的所有内容。并非所有浏览器都支持 Rgba，因此您可以使用后备透明 png，Modernizr 非常适合支持检查。还删除了覆盖层上的高度设置，并将左、右下和左设置为 0。您可以根据自己的喜好更改 home_text 位置，我不确定它应该是什么样子，所以我将其设置为红色框。

这是您的 html:

<div id="overlay">
    <div id="home_text">
        <!-- your image -->
    </div>
</div>

这是你清理过的js:

$(function () {
    var $overlay = $('#overlay');
    $overlay.on('click', function (e) {
        $overlay
            .hide()
            .off();
    });
});

off 方法删除该事件。

可以在这里看到这样的示例:http://jsfiddle.net/SHBXd/1/