CSSで背景要素だけにエフェクトを加える方法

Question

背景の画像にエフェクトをかけて、画像の上に文字　”Blog Index”　”Home/Library/Data"　をのせたいのですが、文字にもエフェクトがかかってしまいます。

CSSで設定したバックグラウンドの画像に薄い青のオーバーレイをかけて、文字は白ではっきり表示したいのですが、どのようにすればよいでしょうか。

下記がコードになります。

  	<main>
      <div class="container-fluid blog-top min-vh-100 hero d-flex justify-content-center align-items-center">
       <div class="overlay"></div>
          <div class="conteiner mt-5">
          <span class="myname">Blog Index</span>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-center">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item"><a href="#">Library</a></li>
              <li class="breadcrumb-item active text-white" aria-current="page">Data</li>
            </ol>
          </nav>
        </div>
      </div>
    </main>

.hero {
    background-image: url(img/overlay-bg2.jpg);
    background-size: cover;
    background-attachment: fixed;
}
.overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #0000FF;
    opacity: .3;
}
.blog-top .container {
  position: absolute;
}
.myname{
  color: #fff;
  text-align: center;
  font-size: 4rem;
}

.breadcrumb {
    background-color: transparent!important;
    font-weight: normal;
}

Comments

[Lhankor_Mhy]

ご提示のCSSですと、heroが高さを失って潰れると思うのですが。

[Hiroko.I]

Lhankor_Mhy様、ありがとうございます。hiro はHTMLのクラス部分でmin-vh-100の指定をしています。

Answer 1

<div class="conteiner mt-5"> <!-- スペルを間違っている。conteiner -> container -->

Comments

[Hiroko.I]

root_jp様、ありがとうございます！解決しました。この問題に数時間も費やしてしまいました。スペルミスだとは。。。初歩的ミスでお恥ずかしい。でもこれで先に進めます。感謝です。