[初心者向け] BootstrapのCarouselを暗くして背景として使う

はじめに

右も左もわからない未経験エンジニアが書く初めての投稿です。
今後も膨大な勉強量の中で、気になったことや発見などを書いていこうと思います。

間違いや記事を見て良かったことなど
気軽にコメントを残して頂けると活力に繋がりますのでよろしくおねがいします

今回は、前回投稿した
「BootstrapのCarouselの上にコンテンツを重ねる」

に追加する形でお送りしたいと思います。

今回やること

前回は好みのコンテンツをcarousel上に載せるところまでやりました♪
今回は、carouselのみを暗くし、前面のコンテンツを引き立たせる効果を付けます

正直、とても簡単なので自身のアイディアを膨らませる一手になってもらえれば幸いです

開発環境

Rails 6.1.3.2
ruby 2.5.1
Docker version 20.10.6
Bootstarp ｖ4.5

前回のコード

javascript/stylesheets/application.scss

.ps-relative {
  position: relative;
}
.ps-absolute {
  position: absolute;
  top: 0;
  left: 0;
}

html.erb

<div class="ps-relative">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner"　 style="height: 600px;">
      <div class="carousel-item active">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>...</h5>
          <p>...</p>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>...</h5>
          <p>...</p>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>...</h5>
          <p>...</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <div class="ps-absolute" style="top: 45%; left: 42%;">
    <h1>Hello World</h1>
  </div>
</div>

本題

まずはわかりやすいように写真を入れます
今回は１０行目のsvgタグのみをimgタグに変え、写真までのパスを記述します

html.erb

    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="/assets/好きな写真のファイル名"> <!-- svgファイルから変更 -->
        <div class="carousel-caption d-none d-md-block">
          <h5>...</h5>
          <p>...</p>
        </div>
      </div>

本当にプログラミングを始めた当初、imgタグの記述法に時間を取られた記憶があります笑

パスを記述しているので、何も考えずに書けば
/assets/images/好きな写真のファイル名
となるのですが
imagesは邪魔です笑
ここで覚えておきましょう！

これで写真が表示されるようになりました

しかし、このままだと画像が明るすぎて載っているコンテンツが目立ちません

ここで画像を暗くするために

javascript/stylesheets/application.scss

.ps-relative {
  position: relative;
}
.ps-absolute {
  position: absolute;
  top: 0;
  left: 0;
}
// 以下を追加
.filter {
  background: #000;
}
.filter-img {
  display: block;
  opacity: .2; //どれくらい暗くするかを設定する数値。低いほど暗くなるようにしてます
}
.w-100 {
  width: 100%;
}

html.erb

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" style="z-index: 0;" data-ride="carousel" data-interval="2000" data-pause="false">
  <div class="carousel-inner" style="height: 600px;">
    <div class="carousel-item active">
    <!-- 変更点 -->
      <div class="filter">
        <img src="/assets/bike.jpg" class="d-block w-100 filter-img" alt="...">
      </div>
    <!-- ここまで -->
　　　　　　　　　　　　<div class="carousel-caption d-none d-md-block">
       ・
　　<!-- 省略 -->
       ・
  　　　　<div class="ps-absolute" style="top: 45%; left: 42%;">
  　　　　  <h1 style="color: white;">Hello World</h1>　<!-- 写真が暗いとわからなくなるので文字を白くしました -->
  　　　　</div>
  </div>
</div>

これで背景としてcarouselを使用することができます♪

最後に

勉強を始めたばかりで知識もなく、拙い文章ですがアウトプットすることで頭の中を整理しつつ、どなたかのお役に立てれば良いなと思い投稿させて頂きました。
最後まで見て頂きありがとうございました！