jquery - 带有 jquery css 的整页背景

Question

我让它正常运行，为我的包装器提供了一个带有不透明度的黑色背景。当我尝试将背景颜色更改为不透明时，问题就来了，我的内容似乎落在背景图像后面。

代码

<img src="bg.jpg" id="bg" alt="">
<div class="wrapper">
    <div class="main">
        <h1>Full Screen</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus, sem id feugiat lobortis, felis velit dignissim sem, et pretium orci est et magna. Nunc non massa id odio ultrices varius. Nulla consequat sollicitudin erat sed condimentum. Cras vel magna ut tellus rhoncus dictum. Nulla dictum adipiscing quam vel condimentum. Aliquam accumsan quam in libero vehicula vel sodales justo tempus. Duis mattis leo a urna feugiat eleifend. Suspendisse cursus molestie est ornare sodales. Sed justo risus, mattis a tincidunt facilisis, mattis porta tortor. Nunc ac quam justo.</p>
    </div>
</div>

CSS

#bg { 
    position: fixed; top: 0; left: 0; 
}
.bgwidth {
    width: 100%;
}
.bgheight {
    height: 100%; 
}
.wrapper{
    width:960px;
    /*border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0px 0px 10px #000;
    background-color:#000;
    filter: alpha(opacity=30);
    opacity: 0.3;*/
    background-color:#000;
    margin-left:auto;
    margin-right:auto;
}

js

$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

        var newWidth = theWindow.width()-$bg.width();
        var newHeight = theWindow.height()-$bg.height();
        //alert(newWidth + "-"+ newHeight);
        $bg.css("left",(newWidth/2)+"px");
        $bg.css("top",(newHeight/2)+"px");
    }

    theWindow.resize(function() {
        resizeBg();
    }).trigger("resize");

});

Answer 1

我已经更新了@deltree 的jsfiddle。 http://jsfiddle.net/trickeedickee/79aXy/2/

当您移除不透明度时，您需要将 position: relative; 添加到您的 .wrapper 中，它会为您工作。

.wrapper {
    position: relative;
    }

希望对您有所帮助。