CSS 透明引导面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24855438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transparent Bootstrap Panel
提问by Boyan Hristov
I have picked this free bootstrap theme, and my problem is that I want to create transparent panels, but when I set opacity: 0.8;the text in the panel, of course, gets transparent, which is not something I would like to happen. I tried using this CSS code, but it looks like there is still something behind the heading and body and the panel doesn't get transparent.
我选择了这个免费的引导程序主题，我的问题是我想创建透明面板，但是当我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 - Sample HTML:
编辑 - 示例 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>
回答by user3212461
CSS
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
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>
回答by Cristhian Carre?o
.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>
回答by akinov
Simply go for "bg-transparent" as mentioned in the link above; https://getbootstrap.com/docs/4.1/utilities/colors/
只需选择上面链接中提到的“bg-transparent”即可； https://getbootstrap.com/docs/4.1/utilities/colors/
Such;
这样的;
<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>
And definitely be sure not to forget adding bootstrap.
并且绝对不要忘记添加引导程序。
