css - 在 css 中显示不透明度的内容

Question

我已经申请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%;
 }

Answer 1

如果您的背景是纯色，请使用 anrgba background-color而不是opacity：

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

上面的结果将是只有元素的背景是 21% 不透明的，而不是元素的内容。

Answer 2

#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>