尝试在可折叠的引导程序 3 中使面板透明答案

【问题标题】：Attemting to make a panel transparent in collapsable for bootstrap 3尝试在可折叠的引导程序 3 中使面板透明
【发布时间】：2020-02-09 10:23:51
【问题描述】：

我有这段 html（我使用的是 bootstrap 3.4.1）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Forsaken Isles</title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="CSS/FSWeb.css">
    <link href="https://fonts.googleapis.com/css?family=UnifrakturMaguntia&display=swap" rel="stylesheet">
  </head>

  <body>

    <!-- DOCUMENTATION NAVBAR -->

    <nav class="navbar navbar-default navbar-inverse">

      <!-- Inside of a Container -->
    <div class="container-fluid">

      <!-- Brand and toggle get grouped for better mobile display -->
      <!-- This is the actual code that create the "hamburger icon" -->
      <!-- The data-target grabs ids to put into the icon -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed"
        data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
        aria-expanded="false">

          <!--  Code for the hamburger icon-->
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand font" href="Link.html">
          LINK</a>
      </div>

      <!-- Anything inside of collapse navbar-collapse goes into the "hamburger" -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="Link.html">LINK</a></li>
          <li><a href="Link.html">LINK</a></li>
          <li><a href="Link.html">LINK</a><li>
          <li><a href="Link.html">LINK</a></li>
        </ul>
        <!-- Stuff on the Right -->
        <!--user name and password with submit button -->
        <form class="navbar-form navbar-right" role="password">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Password">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <form class="navbar-form navbar-right" role="username">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Username">
          </div>
        </form>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>


  <!-- OTHER STUFF ON THE PAGE -->

  <div class="container">
    <div class="jumbotron">
      TEXT
    </div>
  </div>

  <div class="container">
    <h2 class="format font">Feats and Traits:</h2>
    <p class="format">
      TEXT
    </p>
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title format font">
            <a role="button" data-toggle="collapse" data-parent="#accordion"
            href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
              TEXT
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel"
        aria-labelledby="headingOne">
          <div class="panel-body">
            <p class="format">
               PARAGRAPH TEXT
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Need to have JQuery and Javascript for DropDown Actions to work -->

  <script src="http://code.jquery.com/jquery-3.1.1.js"
  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
  crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
  integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

在其中，我试图使包含“PARAGRAPH TEXT”的可折叠面板透明，以便显示下方主体的背景图像。正如您在 CSS 中看到的，我能做的最好的事情就是将面板的背景设置为纯黑色。为其添加不透明度的努力只会改变灰色阴影的颜色，并且尝试将背景颜色设置为某些 rbga 最终会使面板完全变白。

我的 google-fu 发现大量关于如何使导航栏透明但不能折叠面板的问题和示例。我认为这是可能的，我只是没有看到它

CSS：

.panel{
  border-style: hidden
}

.panel-collapse{
  background: #000000
}

.panel-default > .panel-heading{
  background-color: #761601;
}

.panel-group .panel-heading + .panel-collapse > .panel-body{
  border-style: hidden
}

.panel-title{
  background-color: #761601
}

.font{
  font-family: 'UnifrakturMaguntia', cursive;
}

.format{
  text-align: center;
  color: #FFFFFF
}

body{
  background-image: url(file:///C:/FSWebsite/Images/blueforest.jpg)
}

任何帮助将不胜感激。

为 Fiddle 脚本编辑。

https://jsfiddle.net/nt32zcLo/1/

【问题讨论】：

您可以尝试将您的代码放入小提琴中（例如jsfiddle.net）...？这样可以更轻松地为您提供帮助。
已编辑以显示 Fiddle，但 Fiddle 似乎无法正常工作，就像在我的 html 文本编辑器中那样。
没关系，让 Fiddle 按预期工作，忘记添加 CDN
不要使用十六进制代码设置颜色，而是使用 rgba(1,1,1,0.5) 设置颜色，注意最后一位是十进制，即 alpha 通道。
这是想要的效果吗？ jsfiddle.net/v5g6homy ... 似乎折叠的段落是透明的，但 .panel 应用了您在展开时看到的背景颜色。我草率地在小提琴中添加了覆盖（css line #3），请不要将该解决方案投入生产。 :)

标签： html css

【解决方案1】：

将面板的 css 更改为

background: none;

（在这种情况下，没有背景比不透明度为 1 的背景效果更好！）

【讨论】：

我也试过了。除非我遗漏了什么，否则它只会用白色背景淹没面板。更新小提琴：jsfiddle.net/rqoh0sw6
您是否使用开发工具检查 DOM 以查看引导程序是否覆盖了您的规则？您可以使选择器更具体或使background:none!important;。
两者都做了，只是为了确保。 background:none!important; 只是再次将面板变白，如下所示：显式更改 DOM 以将其设置为无背景。更新小提琴：jsfiddle.net/8wj152dh/2