jquery - 在预加载器上使用 JQuery .css() 设置 CSS 背景图像

Question

我想设置：背景图像、背景大小和背景重复...这里的语法会怎样？

qLpercentage = $("<div id='qLpercentage'></div>").text("0%").css({
                    height: "40px",
                    width: "100px",
                    position: "absolute",
                    background: 'url(images/preload.gif)',
                    fontSize: "3em",
                    top: "50%",
                    left: "50%",
                    color: "#FFFFFF",
                    marginTop: "-" + (59 + qLoptions.barHeight) + "px",
                    textAlign: "center",
                    marginLeft: "-50px",
                }).appendTo(qLoverlay);

Answer 1

当您的代码中有静态属性时，为什么要弄乱您的 javascript。

最好将它们放在一个单独的类中并将其添加到您的元素中。

那会干净很多。

这样你也可以指定background image, background size, and background repeat。

CSS

.overlay
{
    height: "40px";
    width: "100px";
    position: "absolute";
    background: 'url(images/preload.gif)' 50% 50% repeat-x ;
    background-size: 275px 125px;
    fontSize: "3em";
    top: "50%";
    left: "50%";
    color: "#FFFFFF";
    textAlign: "center";
    marginLeft: "-50px";
}​

Javascript

qLpercentage = 
    $("<div id='qLpercentage'></div>").text("0%")
    .css({
        marginTop: "-" + (59 + qLoptions.barHeight) + "px"
     })
    .addClass('overlay')
    .appendTo(qLoverlay);​

Answer 2

尝试添加这个：

    "background-image"  : "url(my-image.png)",
    "background-repeat" : "...",
    "background-size"   : "...",

Answer 3

我是正确的，它是这样的：

qLpercentage = $("<div id='qLpercentage'></div>").text("0%").css({
                    height: "40px",
                    width: "100px",
                    position: "absolute",
                    backgroundImage: 'url(images/preload.gif)',
                    backgroundRepeat: 'repeat-x',
                    backgroundSize: '10px 10px',
                    fontSize: "3em",
                    top: "50%",
                    left: "50%",
                    color: "#FFFFFF",
                    marginTop: "-" + (59 + qLoptions.barHeight) + "px",
                    textAlign: "center",
                    marginLeft: "-50px",
                }).appendTo(qLoverlay);