web-dev-qa-db-ja.com

透明Bootstrapパネル

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>
csstwitter-bootstrapopacitytransparent
14
Boyan Hristov

[〜＃〜] 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>

例

27
user3212461
.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>
1
Cristhian Carreño

上記のリンクで説明したように、単に「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>

そして、ブートストラップの追加を忘れないでください。

0
akinov