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

【问题标题】：how to add background image using jquery script on html page如何在html页面上使用jquery脚本添加背景图片
【发布时间】：2012-11-14 04:35:07
【问题描述】：

我想使用 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;
    }
       ..................
       ..................

【问题讨论】：

尝试先搜索您的问题：stackoverflow.com/a/1787976/1538708
@adamb 我第一次尝试。我找不到它。所以最后我在这里提出质疑。

标签： javascript jquery html

【解决方案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"
    });

【讨论】：

【解决方案2】：

这样使用：

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

为带有多行的 message1 div 框放置 css 不是一个好主意，但您可以这样做以节省时间，并且渲染速度会更快。

【讨论】：