透明模式标题引导程序3

问题描述

我正在创建一个引导模态，我想将标题的背景颜色设置为透明，它可以与其他颜色一起使用，但是透明时标题的颜色变为黑色。我的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

解决方法

这是因为父元素.modal-content的{{1}}为background-color（就像您所描述的那样接近黑色）。

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

在现实世界中，可以将一个透明的塑料片放在黑色笔记本的顶部，以此类推。尽管塑料位于顶部，您仍然会在视觉上看到黑色。

因此，要解决此问题，请同时使您的#161415透明。由于它们是透明的，因此模式上的覆盖层将在视觉上成为主要颜色。

.modal-content

twitter-bootstrap-3