Question

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

代码

<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;
    }

我希望这会有所帮助。

整页背景与jquery css

1 个答案: