[解決済み] CSSで画像を色でオーバーレイするには?
2022-03-03 22:56:57
質問
目的
このheader要素にカラーオーバーレイをしたいのですが。CSSでこれを行うにはどうしたらよいでしょうか。
コード
#header {
/* Original url */
/*background: url(../img/bg.jpg) 0 0 no-repeat fixed;*/
background: url(https://fakeimg.pl/250x100/) 0 0 no-repeat fixed;
height: 100%;
overflow: hidden;
color: #FFFFFF
}
<header id="header">
<div class="row">
<div class="col-xs-12">
...
</div>
</div>
</header>
解決方法は?
rgbaはCSSで色を宣言する方法であり、アルファ透過性をサポートしています。
.row
をこのようにオーバーレイとして使用します。
#header {
background: url(../img/bg.jpg) 0 0 no-repeat fixed;
height: 100%;
overflow: hidden;
color: #FFFFFF
}
.row{
background: rgba(39,62,84,0.82);
overflow: hidden;
height: 100%;
z-index: 2;
}
関連
-
[解決済み】フッターをページの下部に中央に配置するにはどうすればよいですか?
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み】CSS "margin: 0 auto" が中央揃えにならない。
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】iframeの背景色を変更する問題
-
[解決済み】エラー。要求されたURL"[no URL]"は無効です。
-
[解決済み】WebページでWindows 95のフォントを使用する
-
[解決済み] span with onclick event inside the tag
-
[解決済み] フレックスアイテムを右にフロートさせる
-
[解決済み] HTML5 Validation Error: body start tag が見えたが、同じタイプの要素がすでに開かれていた
-
[解決済み] IFrameからボーダーを取り除く
-
[解決済み] WebForms UnobtrusiveValidationMode には、'jquery' の ScriptResourceMapping が必要です。jquery という名前の ScriptResourceMapping を追加してください(大文字と小文字を区別します)。
-
[解決済み] ホバー時に背景画像を暗くする
-
[解決済み] Visual Studio Code CSSエラー「空のルールセットを使用しないでください」【終了しました