0

我有静态的 HTML 结构，我的背景图片是全屏的每一页。在标签后添加了一个 img 标签：

<img src="img/about.jpg" id="static_bg" alt="">

和 CSS：

#static_bg { position: fixed; top: 0; left: 0; z-index: -2;}
.staticbgwidth { width: 100%; }
.staticbgheight { height: 100%; }

最后，我的 JS 代码：

$(window).load(function() {    

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

    function resizeBg() {

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

    }

    theWindow.resize(resizeBg).trigger("resize");

});

是的，它运作良好。但我想删除我的 IMG 并添加一个 DIV 背景。当我改变这个时，不要工作 JS。

我该如何解决？谢谢你。

4

3 回答 3

0

尝试使用background property in CSSlike，

#static_bg { background:url('img/about.jpg') ;
         position: fixed; top: 0; left: 0; z-index: -2;}

Div就像，

<div id="static_bg"></div>

如果上面没有看到这个演示，你可以使用background-size:cover并申请backgroundbodyworks

于 2013-11-15T09:27:32.023 回答
0 
<div class="your_div"></div>

.your_div {
    background:url('img/about.jpg') no-repeat;
    background-size:cover;
 }
于 2013-11-15T09:42:15.597 回答
0

像这样为您的图像设置一个 ID：

<img id="background-img" src="img/about.jpg" id="static_bg" alt="">

通过以下代码获取您的背景网址：

var $bg-url = $("#background-img").attr("src");

然后像这样通过css删除您的图像：

$("#background-img").css("display","none");

然后为您想要的那个元素设置背景。在这种情况下$("#static_bg")

$("#static_bg").css("background-image",'url('"+$bg-url+'")');

jsFiddle 在这里

于 2013-11-15T09:45:26.967 回答