Question

我有这个小提琴供参考，显示我正在谈论的内容...当您在div中滚动数据表时，图像也会滚动。当下面的div滚动时，我需要图像不移动，但我不能这样做。覆盖的div可以是任何大小，即使窗口调整大小，我也需要覆盖的图像在正确的位置。我想如果用CSS无法完成，那么javascript解决方案就足够了，但当然更多的是只有css。

感谢!!!!

http://fiddle.jshell.net/ts46235/BMKZa/26/

的CSS：

    div.overlay { 
      position: relative;
    }
    div.overlay:after {
      content: "";
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: url(https://www.fadingred.com/media/images/spinner-small.gif) no-repeat 50% 50% ;
    }

Answer 1

首先，您需要将overlay类属性移动到包含grid div的div（例如您的float-left clear-left div），以便gif图像不会滚动你的桌子。然后，您需要调整您的CSS代码：

div.overlay:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 700px;
  height: 400px;
  background: url(https://www.fadingred.com/media/images/spinner-small.gif) no-repeat 50%;
  pointer-events: none;
}

与top，left，width和height属性相关的协议，我们会创建一个与grid div相同大小的框，并且同样的立场。然后，使用:before而不是:after，图像显示在表格内容的顶部而不是后面。最后pointer-events: none确保图像在选择文本时不会造成麻烦。

这是一个有效的小提琴：( Fiddle )

我最初建议但是没有按你的意愿工作：

div.overlay { 
  position: relative;
  background: url(https://www.fadingred.com/media/images/spinner-small.gif) no-repeat 50% 50% ;
}
div.overlay:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

在可滚动但不滚动图像的div上创建叠加（使用bg图像）

1 个答案: