在弹出窗口中设置背景不透明度

Question

我的弹出窗口有问题，我希望背景是透明的，但是当我将 css 中的不透明度设置为 0.5 或更低时，文本也是透明的并且非常暗。如何将背景设置为 50% 不透明度但文本仍然是 100%？帮助会很好:)

继承人完整的代码： https ://jsfiddle.net/Lwbmdw2g/

这里的HTML：

   <div class="modal fade" id="myModall" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                      <div class="modal-dialog imp-bg">
                        <div class="modal-content imp-bg">

                          <div class="modal-header imp-bg">
                            <div class="title">
                                <div></div>
                                News
                            </div>
                          </div>

                          <div class="modal-body">
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 imp-block">

                                    <p class="mini imp-mini">

                                    <strong>Hier steht der News Text.</strong><br />

                                    <br /><br />
                                    </p>

                                </div>

                            </div>
                          </div>

                          <div class="modal-footer">
                            <button type="button" class="btn btn-default imp-button" data-dismiss="modal">X</button>
                          </div>
                        </div>
                      </div>
                    </div>

这里是按要求打开的模态：

 <script type="text/javascript">
$(window).on('load',function(){
    $('#myModall').modal('show');
});
</script>

原文由 C.S 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如 Albzi 提到的那样，使用 rgba 是可行的。将您的 imp-bg 样式更改为此。

 .imp-bg{background:rgba(0,0,0,0.7);}

原文由 srikar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我认为它会帮助你。根据需要设置背景不透明度。

 #myModall { background: rgba(0,0,0,.5); }

原文由 zero 发布，翻译遵循 CC BY-SA 3.0 许可协议