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

Answer 2

如果您在页面加载时显示叠加层，通常您不需要使用客户端脚本动态创建它。我通常会在页面中包含叠加层。然后，您不需要在页面加载时动态创建它并显示它。

另外请注意，我会尝试避免使用不透明度和滤镜，因为这也会应用于背景图像。尝试使用RGBA颜色，并为不支持它的浏览器添加RGB回退。要使背景图像居中，只需使用background-position属性

如何在叠加层顶部附加居中的进度微调器？

2 个答案: