this free bootstrap theme を選択しました。私の問題は、透明パネルを作成したいのですが、opacity: 0.8;
パネルのテキストはもちろん透明になりますが、これは私が望んでいることではありません。このCSSコードを使用してみましたが、見出しと本文の背後にまだ何かがあり、パネルが透明にならないようです。
.panel-transparent .panel-heading{
background: rgba(122, 130, 136, 0.2)!important;
}
.panel-transparent .panel-body{
background: rgba(46, 51, 56, 0.2)!important;
}
EDIT-サンプルHTML:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel primary</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
[〜#〜] css [〜#〜]
body {
background:#c33;
}
.panel-transparent {
background: none;
}
.panel-transparent .panel-heading{
background: rgba(122, 130, 136, 0.2)!important;
}
.panel-transparent .panel-body{
background: rgba(46, 51, 56, 0.2)!important;
}
[〜#〜] html [〜#〜]
<div class="panel panel-primary panel-transparent">
<div class="panel-heading">
<h3 class="panel-title">Panel primary</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
.transparent{
background-color: rgba(0,0,0,0.15);
}
.panel{
background-color: transparent;
border: 1px #222;
}
<div class="panel panel-default">
<div class="panel-heading">Título</div>
<div class="panel-body transparent">
</div>
</div>
上記のリンクで説明したように、単に「bg-transparent」を選択してください。 https://getbootstrap.com/docs/4.1/utilities/colors/
そのような;
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title bg-transparent text-dark">Panel primary</h3>
</div>
<div class="panel-body bg-transparent text-white">
Panel content
</div>
</div>
そして、ブートストラップの追加を忘れないでください。