透明引导面板 [英] Transparent Bootstrap Panel

问题描述

我选择了这个免费的引导主题，我的问题是我想创建透明面板，但是当我设置 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>

示例< a>

Example

这篇关于透明引导面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！