0

透明なオーバーレイは灰色がかった性質のものであり、進行状況バーが完了するまでブラウザーでカバーしている div の使用をブロックする進行状況バーを含むことになっています。また、フラッシュを使用せずにこれを行いたいと考えています。どうすればいいですか？

 div.transparent_lists
{
 clear:both;
 border-top-style:solid;
 border-bottom-style:solid;
 opacity:0.6;
 filter:alpha(opacity=60);
 border-bottom-color: #A9A9A9;
 border-top-color: #A9A9A9;
 border-bottom-width: thin;
 border-top-width: thin;
 z-index: 1000;
 display: block;
 height: 20px;
 position: absolute;
}
4

4 に答える 4

1

あなたは次のようなことをすることができます：

<div id="parent" style="position:relative;height:200px;width:200px;overflow:hidden;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam
    <div id="overlay" style="position:absolute;top:0px;left:0px;width:200px;height:200px;background-color:#ccc;opacity:.8;padding-top:90px;text-align:center;">
        Content for overlay here
    </div>
</div>

また、必要に応じてオーバーレイ要素を表示/非表示にすることができます。

于 2012-10-18T20:29:13.980 に答える
1

jquery UIプログレスバーとblockUIを一緒に使用して、プログレスバーとのオーバーレイを実現できます。ここに簡単で汚い例があります。

于 2012-10-18T21:00:26.087 に答える
1

その親をに設定しposition: relative、透明な子を次のように設定しposition: absoluteます。

div {
  width: 500px;
  height: 200px;
  position: relative;
}

div div {
  width: 100px;
  height: 50px;
  background: black;
  opacity: 0.5;
  position: absolute;
  top: 50px;
  left: 200px;
}

デモ

于 2012-10-18T20:29:20.573 に答える
0

それをどのように実装するかは、ロードしているものとその方法によって異なりますが...

私だったら、プログレス バーのサイズを決定するために、CSS トランジションとプログレス イベント (AJAX と仮定) を利用します。

于 2012-10-18T20:31:45.473 に答える