jquery - 如何在叠加层顶部附加居中的进度旋转器？

Question

我有以下代码片段，基本上附加了一个按要求工作的网站覆盖层。

我现在唯一无法做的就是如何显示我拥有的图像进度旋转器，该旋转器固定在屏幕中央的同一覆盖层上。如果可能的话，我希望它成为现有覆盖层 div 的一部分，因为我需要发出 $("#overlay").hide(); 来删除覆盖层。

我知道我需要包括:

'background-image: 'url("progress_spinner.gif")'

但我不确定该怎么做以及是否需要将另一个 div 附加到 body

$(function() {
   var docHeight = $(document).height();

   $("body").append("<div id='overlay'></div>");

   $("#overlay")
      .height(docHeight)
      .css({
         'opacity' : 0.6,
         'filter' : 'alpha(opacity=60)',
         'position': 'absolute',
         'top': 0,
         'left': 0,
         'background-color': 'black',
         'width': '100%',
         'z-index': 5000
      });    
});

Answer 1

您需要做的是将 background 属性与以下属性一起使用:

.css({
         'opacity' : 0.6,
         'filter' : 'alpha(opacity=60)',
         'position': 'absolute',
         'top': 0,
         'left': 0,
          'background': 'black url(path/to/image) no-repeat center center',   
         'width': '100%',
         'z-index': 5000
});

该属性的参数是:

• 背景颜色
• 图像路径
• 是否重复、重复x、重复y或不重复背景图片
• 左侧位置
• 最高位置

或者，您也可以使用完整版本:

.css({
         'opacity' : 0.6,
         'filter' : 'alpha(opacity=60)',
         'position': 'absolute',
         'top': 0,
         'left': 0,
         'background-color': 'black',
         'background-image': 'url(path/to/image)',
         'background-repeat': 'no-repeat',
         'background-position': 'center center',   
         'width': '100%',
         'z-index': 5000
});

DEMO