javascript - 如何在整页半透明覆盖div上控制图像的CSS

Question

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

我在下面列出了一个示例，我希望它具有完全不透明度并且与页面的左上角有一些间距......但是当我加载它时，它设置为 .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/