[解決済み] 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}
関連
-
[解決済み】div間の空白を削除する
-
[解決済み] SVGの塗りつぶし色が効かない
-
[解決済み] Chrome で注入されたスタイルシートによる奇妙なスタイリングが発生する
-
[解決済み] divを親の中で自動的に縦に重ねるにはどうしたらいいですか?
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] リスト項目にマウスを置いたときに、カーソルを手の形に変えるには?
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Twitter Bootstrapでナビバーの色を変更する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ダウンロードしたフォントのデコードに失敗しました。
-
[解決済み】div間の空白を削除する
-
[解決済み] font: inheritを使用する目的は何ですか?
-
[解決済み] CSSやSVGで半円を描く
-
[解決済み] FontAwesomeによる星評価用CSS
-
[解決済み] Bootstrap 3でnavbar-static-topは何をするのですか?
-
[解決済み] エレメントの角を面取りする方法を教えてください。
-
[解決済み] 子 div が親 div からはみ出さないようにする。
-
[解決済み] Font Awesomeで2つ以上のアイコンを重ねる/重ねるには?
-
[解決済み] ChromeでCSSが効かない