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);
}

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

1 个答案: