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、widthおよびプロパティを使用して、 divとheight同じサイズgridで同じ位置にボックスを作成します。次に、: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%;
}
于 2013-07-10T00:53:45.820 に答える