当我不想时将不透明度应用于内部 div

Question

我正在将包装器设置为全屏并带有轻微的不透明度。在那个包装器中，我有另一个 div 将在屏幕上居中。一切正常，但不透明度正在应用于内部 div（加载图标和一些文本）。

html 不能改变，因为 .dataTables_processing 无论如何都将始终是一个包装器。

html：

<div class="dataTables_processing">
    <div class="dataTables_processing_custom">
        <i class="fa fa-spinner fa-spin"></i> Please wait...
    </div>
</div>

css：

.dataTables_processing {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: 0;
    padding: 0;
    background-color: #333;
    opacity: 0.05;
    cursor:wait;
    z-index:9998;
}

.dataTables_processing_custom {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 30px;
    margin-left: -100px;
    text-align: center;
    color:#3276b1;
    font-size: 14px;
    z-index:9999;
}

.dataTables_processing_custom i{
    font-size:30px;
    vertical-align:middle;
}

Answer 1

当 CSS 样式 opacity 应用于父级时，它会应用于所有子级，尝试使用 RGBA 方法作为背景：

.parent {
background: rgba(0,0,0,0.5);
}