0

我有这个小提琴供参考，它显示了我在说什么……当你在 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% ;
    }
4

1 回答 1

1

首先，您需要将overlay类属性移动到包含您的div 的griddiv（例如您的float-left clear-leftdiv），以便 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和属性，我们创建一个与您的 div 大小相同且位置相同的width框。然后，使用而不是，图像显示在表格内容的顶部而不是后面。最后保证图片在选择文字的时候不会出问题。heightgrid:before:afterpointer-events: none

这是一个工作小提琴：（小提琴）

我首先建议但没有按您希望的那样工作的是：

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%;
}
于 2013-07-10T00:53:45.820 回答