透明模态 header bootstrap 3

Question

我正在创建一个 bootstrap 模态，我想将 header 的背景颜色设置为透明，它确实适用于其他颜色，但透明我的 header'颜色变黑。我的 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

Answer 1

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

因为你的 header 是反式的parent，它本身不会有 background-color 但 parent 有一个 background-color 所以就是这样您将看到 - 给人一种 header 具有黑色背景颜色的错觉。

现实世界中的一个类比是，如果您在黑色笔记本的顶部放置一个反式parent sheet 塑料。尽管塑料在顶部，您仍然会在视觉上看到黑色。

所以要解决这个问题，请同时提供您的 .modal-content transparent。由于它们是反式的parent，模态框的叠加层将成为视觉上的主色。

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

透明模态 header bootstrap 3

transparent modal header bootstrap 3

twitter-bootstrap-3