У меня есть этот бит 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, - установить фон панели на solid черный. Попытки добавить к нему непрозрачность только изменяют оттенки формы серого, а попытки установить фоновый цвет для некоторого rbga просто заканчивают тем, что делают панель полностью белой.
Мой гугл-фу находит загружает вопросов и примеров о том, как сделать Nav-bar прозрачными, но не разборными панелями. Я предполагаю, что это возможно, я просто не вижу этого
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/