如何在整页半透明叠加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/