CSS中的模态背景不会使颜色透明答案

【问题标题】：Modal backdrop in css doesn't make color transparentCSS中的模态背景不会使颜色透明
【发布时间】：2022-08-17 18:03:56
【问题描述】：

我需要使模态对话框背景的颜色透明，由于某种原因我不能这样做，我的 css 和 html 在下一行 CSS

.modal-backdrop {
    background-color: transparent;
  }

HTML

<div class=\"modal fade\" id=\"notificationModal\" >
<div class=\"modal-dialog notification modal-dialog-scrollable\">
    <div class=\"modal-content\">
        <div class=\"modal-header\" style=\"background-color: #009ee2;\">
            <span class=\"modal-title col-md-3\" style=\"color: white; font-size: 25px; padding-bottom: 0.5rem;\">
                Notifications</span>
        </div>
        <div class=\"modal-body\" style=\"color: black; padding-top: 0px;\">
      
            <div class=\"table-responsive\">
                <div style=\"height: 0.25rem;\"></div>
                
            </div>
        </div>
        <div class=\"modal-footer\">
            <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Zatvori</button>
        </div>
    </div>
</div>

我在下一条路上打开模式

<li class=\"nav-item\">
                <a href=\"#\" class=\"navbar-nav-link\" data-toggle=\"modal\" 
                    data-target=\"#notificationModal\">
                    <i class=\"icon-bell2\"></i>
                    <span class=\"d-md-none ml-2\"></span>
                    <span class=\"badge border-white ml-auto ml-md-0\" style=\"color: white;\">10</span>
                </a>
            </li>

您的所有 HTML 元素实际上都没有 modal-backdrop 类。
正确的地方在哪里？
tutorialdeep.com/live-editor/… 只需添加 .modal-backdrop { 背景颜色：透明； } 很有型

标签： angular

【解决方案1】：

在您在 cmets 中发布的示例链接中，这是一个 Bootstrap 3 模式，因此只需将 data-backdrop="static" 更改为 data-backdrop="false"。这是解释如何执行此操作的文档https://getbootstrap.com/docs/3.3/javascript/#modals-options

【讨论】：