1. ホーム
  2. html

[解決済み] 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;
}