Question

我正在使用“background：#BDBDBD url（image.png）左上角无重复”这个css属性，用于设置宽度和高度的两个div元素。在单击按钮时，我通过在setInterval（）的帮助下连续运行函数来动态更改两个嵌套div的宽度。图像没有在chrome中加载，但它在firefox和IE中运行良好。许多搜索都表示使用chrome中的背景图像不起作用，但这些解决方案似乎都不起作用。

<div id="boxes">
          <div id="dialog" class="window" style="overflow: auto">

              <div id="progressBar" class="meter-wrap" style="display: block;position: relative; margin: auto;">
                 <div class="meter-value" style="background-color: #05C; width: 40%">
                    <div class="meter-text">
                       Loading... 
                     </div>
                 </div>
              </div>
              <div class="meter-text-message">
                        Loading...
              </div>
  </div>

CSS：

.meter-wrap, .meter-value, .meter-text {
        width: 155px; height: 30px;
}

.meter-wrap, .meter-value {
    background: #bdbdbd url('/sf-images/tracker/inline_progress_bar.png') top left no-repeat;
}

js code：

function setProgressBar() {
    var pgBar = jQuery("#progressBar");
    pgBar.show();
    running = true;
    var inter = null;

    function run() {
        pgBar.find(".meter-value").css("width", progress + "%");
        pgBar.find(".meter-text").text(progress + "%");
        if (progress == 100) {
            jQuery(".meter-text-message").html("Complete");
            clearInterval(inter);
            running = false;
        }
    }
    inter = setInterval(run, 50);
}

发现第一次没有加载图像，我用另一种方法将图像作为背景显示为div元素。之后，当我执行上面的js方法时，图像加载正确。

图像未从css背景属性加载铬

0 个答案: