☰

CSS で画像に色をオーバーレイするにはどうすればいいですか? 質問する

tag-icon • tag-icon html css overlay
CSS で画像に色をオーバーレイするにはどうすればいいですか? 質問する

客観的

このヘッダー要素にカラーオーバーレイを適用したいのですが、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>

ベストアンサー1

要素に写真を重ねるには rgba を使用する必要があります。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;
}

おすすめ記事