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

これを追加してみてください：

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

Answer 2

私は次のように正しいです：

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);

Answer 3

コードに静的属性があるのに、なぜ 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);​