在预加载器上使用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);