Bootstrapの4つのrowクラスにそれぞれ違う背景色と背景画像を設定したいです。

Question

4つのrowクラスにそれぞれ違う背景色と背景画像を設定したいです。
画像は変更できました。
背景色はどうやって変更すれば良いでしょうか・・・

        <div class="container">

          <div class="row bg">
            <div class="col-12 col-md-12 text-center">
              <p>父</p>
            </div>
          </div><!--row-->

          <div class="row bg">
            <div class="col-12 col-md-12 text-center">
              <p>母</p>
            </div>
          </div><!--row-->

          <div class="row bg">
            <div class="col-12 col-md-12 text-center">
              <p>姉</p>
            </div>
          </div><!--row-->

          <div class="row bg">
            <div class="col-12 col-md-12 text-center">
              <p>妹</p>
            </div>
          </div><!--row-->

        </div><!--container-->

.bg{
  background: url("../images/disgusting-fail-failure-2882.jpg") no-repeat center;
  background-size: cover;
  position: relative;
  height:460px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  margin-bottom:32px;
  border-radius: 0.25em;
}

div.bg:nth-child(2) {
  background: url("../images/bowl-centimeter-delicious-1332189-2.jpg") no-repeat center;
}

div.bg:nth-child(3) {
  background: url("../images/argument-bench-breakup-984949-2.jpg") no-repeat center;
}

div.bg:nth-child(4) {
  background: url("../images/close-up-duel-fingers-1249214.jpg") no-repeat center;
}

.bg::before{
	background:#75f4f4;
    opacity: 0.6;
    position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
    border-radius: 0.25em;
}

目指している形

Answer 1

背景画像の上に半透明の色を乗せて、その上に文字を置きたい、ということでよろしいですか？
であれば↓こんな感じでできると思います。

/*背景のベース*/
.bg{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  height:460px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  margin-bottom:32px;
  border-radius: 0.25em;
}

/*背景画像の個別指定*/
div.bg:nth-child(1) {
  background-image: url("../images/disgusting-fail-failure-2882.jpg");
}

div.bg:nth-child(2) {
  background-image: url("../images/bowl-centimeter-delicious-1332189-2.jpg");
}

div.bg:nth-child(3) {
  background-image: url("../images/argument-bench-breakup-984949-2.jpg");
}

div.bg:nth-child(4) {
  background-image: url("../images/close-up-duel-fingers-1249214.jpg");
}

/*色ベタのベース*/
.bg::before{
    //opacity: 0.6;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
    border-radius: 0.25em;
}

/*色ベタの個別指定*/
div.bg:nth-child(1)::before {
  background-color: rgba(xxx,xxx,xxx,0.6); //rgbaで透過色を指定
}
div.bg:nth-child(2)::before {
  background-color: rgba(xxx,xxx,xxx,0.6); //rgbaで透過色を指定
}
div.bg:nth-child(3)::before {
  background-color: rgba(xxx,xxx,xxx,0.6); //rgbaで透過色を指定
}
div.bg:nth-child(4)::before {
  background-color: rgba(xxx,xxx,xxx,0.6); //rgbaで透過色を指定
}

※opacityで一律に0.6に透過させるのではなく、rgba()でやっているのは、
使う色によって透過の雰囲気が多少違うかな？と思ったので、
個別に透過度を調整できるようにrgba()で指定させていただいております。
一律でいいならopacityでも大丈夫かな…？

Comments

[退会済みユーザー]

無事出来ました、、！
ありがとうございます。（この度は自分の未熟さでお手数おかけいたしました・・）

Answer 2

nth-child(n)にそれぞれbackground-colorを設定すればいいです

追記

.bg{
  background: url("../images/disgusting-fail-failure-2882.jpg") no-repeat center;
  background-size: cover;
  position: relative;
  height:460px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  margin-bottom:32px;
  border-radius: 0.25em;
}

div.bg:nth-child(2) {
  background: url("../images/bowl-centimeter-delicious-1332189-2.jpg") no-repeat center green;/*色を追加（green）*/
}

div.bg:nth-child(3) {
  background: url("../images/argument-bench-breakup-984949-2.jpg") no-repeat center blue;/*色を追加（blue）*/
}

div.bg:nth-child(4) {
  background: url("../images/close-up-duel-fingers-1249214.jpg") no-repeat center red;/*色を追加（red）*/
}

.bg::before{
    /*background:#75f4f4; 消す*/
    opacity: 0.6;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
    border-radius: 0.25em;
}

Comments

[退会済みユーザー]

.bg::before:nth-child(n){
background-color:red;
}ということでしょうか？

[kyoya0819]

nは数字で置き換えていただければ（既出のbackground imageにbackground-colorを追加すればいいだけです）

[退会済みユーザー]

やってみましたがダメでした・・・

[kyoya0819]

修正しました。
CodePenにあげときます（画像は置き換えてます）
https://codepen.io/asuchi0819/pen/yLBqXVY?editors=1100#0

[退会済みユーザー]

やってみましたがダメでした・・・

[kyoya0819]

CodePenはご確認いただけましたか？

[退会済みユーザー]

はい。
一応目指している形の画像を添付します。

重なる順番は①背景画像→②背景色→③テキストになります。

[kyoya0819]

背景画像の上に背景色を重ねると画像が見えなくなりますがよろしいでしょうか？

[退会済みユーザー]

背景画像は見えるようにしたいです。