透明引导面板

本文介绍了透明引导面板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我选择了这个免费的引导主题，我的问题是我想创建透明面板，但是当我设置 opacity：0.8; 面板中的文本，当然，变得透明，这不是我想要发生的事情。我尝试使用这个CSS代码，但它看起来仍然有一些背后的标题和正文和面板不透明。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..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范例：EDIT - Sample 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 >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> 示例Example 这篇关于透明引导面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！