Question

我试图在方向改变时改变身体背景图像。起初这看起来很简单，所以我尝试了这段代码：

    function onBodyLoad() {     
        document.addEventListener("deviceready", onDeviceReady, false);
        document.addEventListener("orientationchange", onOrientationChange, true);
    }

    function onOrientationChange(e) {
        var orientation = (window.orientation == -90 || window.orientation == 90) ? "landscape" : "portrait";
        console.log("orientation: " + orientation);
        $("body").css("background-image", "url(images/" + orientation + ".png) no-repeat fixed center top");
    }

    function onDeviceReady() {
        console.log("at onDeviceReady");
        onOrientationChange();
    }

每当我改变方向时，我都会在控制台中显示正确的方向 - 这意味着我的事件会被正确地触发。但是后台不会改变，甚至最初设置（即使我在onDeviceReady中手动调用处理程序 - 我看到它被调用的控制台输出）。 $("body")行中的某些内容无法正常工作。我尝试了几种CSS属性组合甚至是.css({"backgroundImage" : "..."})，但无济于事。

为了记录，图像文件夹中有一个landscape.png和portrait.png，与html页面位于同一目录中。

我错过了什么？

感谢您的时间。

Answer 1

也许没有jQuery？

function onOrientationChange(e) {
    var orientation = (window.orientation == -90 || window.orientation == 90) ? "landscape" : "portrait";
    console.log("orientation: " + orientation);
    document.body.style.backgroundImage="url('images/" + orientation + ".png')";
    document.body.style.backgroundRepeat="no-repeat";
    document.body.style.backgroundAttachment="fixed";
    document.body.style.backgroundPosition="top center";
}

正如@scessor所说，您只能设置url属性的background-image，因此您应该使用background或其他backgroundXXX属性。

使用课程

function onOrientationChange(e){
    var orientation = (window.orientation == -90 || window.orientation == 90) ? "landscape" : "portrait";
    console.log("orientation: " + orientation);
    $("body").removeClass("portrait").removeClass("landscape").addClass(orientation);
}

Answer 2

background-image只定义了一个网址（请参阅definition）：

$("body").css("background-image", "url(\"images/" + orientation + ".png\")");

或使用带有网址和更多背景参数的background（请参阅definition）：

$("body").css("background", "url(\"images/" + orientation + ".png\") no-repeat fixed center top transparent");

=== UPDATE ===

请尝试以下操作：

$("body").css({ 
    backgroundImage: "url('images/" + orientation + ".png')"
    ,backgroundRepeat: "no-repeat"
    ,backgroundAttachment: "fixed"
    ,backgroundPosition: "top center"
});

或

 $("body").css({ 
    background: "url('images/" + orientation + ".png') no-repeat fixed top center transparent"
});

Answer 3

找到两篇可能对您有用的文章。

mobile-safari-background-image-scaling-quirk

而另一个与重复的css有关。

Background-image-doesn-t-show-up-in-Safari

起初看起来你可能不会这样做;但也许改变你的bgimage会导致同样的问题。

如何在PhoneGap应用程序中更改背景图像？

3 个答案: