如何在HTML頁面上使用jquery腳本添加背景圖像

Question

我想使用jquery為我的游戲記分牌添加少量圖像作為背景。

例如。 標頭為header.jpg，頁腳為footer.jpg，正文為body.jpg。
我在jquery中創建了一個小游戲。

當前，“我的游戲記分牌”僅顯示少量文本消息。 我想在一些背景圖像上顯示它們。

以下是我用來顯示短信的代碼。 請幫助我，以便我可以在它們上顯示背景圖像。

碼：

     ......................
     ......................
        else {
        goldenGoal = false; 
        $("#message1").html("You Lose"); 
        $("#message1").css("color", "red");
          $("#message1").css("size", "190px");
        $("#play").html("Play Level Again");
        $("#lgoals").html(0);
        $("#vgoals").html(0);
        stats.loses++;
        //level = 1;
        //fps = 50;
        //difficulty = 0.2;
    }
       ..................
       ..................

Answer 1

基本上，您必須執行以下操作：

$('#containerID').css('background-image', 'url(path/to/image.jpg)');

或者，在您的示例中：

$('body').css('background-image', 'url(body.jpg)');
$('#header').css('background-image', 'url(header.jpg)');
$('#footer').css('background-image', 'url(footer.jpg)');

---

順便提一下，作為輸入：嘗試優化代碼。 它（不明顯！）更快，更干凈。 示例：代替

$("#message1").html("You Lose"); 
$("#message1").css("color", "red");
$("#message1").css("size", "190px");

你可以做

$("#message1")
    .html("You Lose")
    .css({
        "color": "red",
        "size": "190px"
    });

Answer 2

使用這種方式：

$("#header").css({"color":"red", "background":"url(your image path)"});

將message1 div框的css放入多行不是一個好主意，但是您可以通過這種方式節省時間，並且渲染速度會更快一些。