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

问题描述

我有这段 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/

标签： htmlcss

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

问题描述

解决方案

推荐阅读