透明模态标题引导程序 3答案

【问题标题】：transparent modal header bootstrap 3透明模态标题引导程序 3
【发布时间】：2020-09-06 15:13:20
【问题描述】：

我正在创建一个引导模式，我想将标题的背景颜色设置为透明，它确实适用于其他颜色，但透明时我的标题颜色变为黑色。我的 CSS：

<style>
  .modal-header {
    background-color: transparent !important;
  }
</style>

HTML：

<body>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
      Launch demo modal
    </button>
  <!-- Modal -->
  <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
          ...abd,ajkwbldkajgwldkahgwldkjalwkjdhalkjwdhlakjwhdawdw
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</body>

现场演示：https://codepen.io/spuft/pen/KKzZvBa

【问题讨论】：

标签： twitter-bootstrap-3

【解决方案1】：

这是因为父元素.modal-content 有一个background-color 的#161415（与您描述的一样接近黑色）。

由于您的标题是透明的，它本身不会有背景色，但父级有背景色，所以这就是您将看到的 - 给人一种标题具有黑色背景色的错觉。

现实世界中的一个类比是，如果您将一张透明的塑料片放在黑色笔记本的顶部。尽管塑料在顶部，您仍然会在视觉上看到黑色。

因此，要解决此问题，请将您的 .modal-content 也透明化。由于它们是透明的，因此模态的叠加层将是视觉上的主要颜色。

.modal-content {
    background-color: transparent;
    color: white;
}

【讨论】：