0

ラッパー クラスに適用opacityし、読み込み中の画像をページに表示したいと考えています。読み込み中の画像は、opacity調整されたラッパー内に配置されます。このため、読み込み中の画像がはっきりと表示されていません。読み込み中の画像を不透明にせずにはっきりと表示したい。誰かが私にそれを行う方法を教えてください。

 #wrapper{
     opacity:0.21;
     width:100%;
     height:100%;
 }
 #loading{ 
     background-image:url('loading.gif');
     width:200px;  
     height:20px;
     z-index:10px;
     position:fixed;
     top:50%;
     left:50%;
 }
4

2 に答える 2

2

背景が無地の場合は、 のrgba background-color代わりに を使用しopacityます。

background-color: rgba(255, 255, 255, 0.21); /* white, 0.21 opacity */

上記の結果は、要素のコンテンツではなく、要素の背景のみが 21% 不透明になるということです。

于 2012-10-05T21:47:34.513 に答える
1

#wrapper 内のすべては、その位置に関係なく、割り当てた不透明度を継承します。これはおそらくあなたがしていることです：

<!-- #loading will have the same opacity of its parent element -->
<div id="wrapper">
  <div id="loading"></div>
</div>

#loading 要素のタグは #wrapper 要素の外に置く必要があります。

<!-- #loading and #wrapper will have their own separate opacity -->
<div id="loading"></div>
<div id="wrapper"></div>
于 2012-10-05T22:03:13.057 に答える