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