Question

我想使用jquery为我的游戏记分板添加一些图像作为背景。

例如。 header.jpg为标题，footer.jpg为footer，body.jpg为body 我在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不是一个好主意，但是你可以这样做以节省你的时间，这会更快一点。

如何在html页面上使用jquery脚本添加背景图像

2 个答案: