1. ホーム
  2. css

[解決済み] bootstrap 4 でカードブロックの不透明度を変更する方法

2022-02-12 17:14:42

質問

Bootstrap 4のシンプルなCardコンポーネントを持っています。

<div class="card">
    <div class="card-header">This is my header</div>
    <div class="card-block">This is my block</div>
    <div class="card-footer">This is my footer</div>
</div>

ヘッダーとフッターの不透明度を1にして、ブロックの不透明度を0.4にしたいのですが、背景色のスタイルにrbgaを使おうとしてもうまくいきません。

.card-block { background-color: rgba(245, 245, 245, 0.4); }

解決方法は?

ブートストラップクラスが判明 .カード に設定しようとした背景の不透明度のCSSスタイルが上書きされました。 .カードブロック キーワードに!importantを付けても付けなくても。

カードに背景スタイルを追加して、個々の 不透明度 .card-header および. カードフッター を1にしてください。

.card { background-color: rgba(245, 245, 245, 0.4); }
.card-header, .card-footer { opacity: 1}