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

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

index.html
1
2        <div class="container">
3
4          <div class="row bg">
5            <div class="col-12 col-md-12 text-center">
6              <p>父</p>
7            </div>
8          </div><!--row-->
9
10          <div class="row bg">
11            <div class="col-12 col-md-12 text-center">
12              <p>母</p>
13            </div>
14          </div><!--row-->
15
16          <div class="row bg">
17            <div class="col-12 col-md-12 text-center">
18              <p>姉</p>
19            </div>
20          </div><!--row-->
21
22          <div class="row bg">
23            <div class="col-12 col-md-12 text-center">
24              <p>妹</p>
25            </div>
26          </div><!--row-->
27
28        </div><!--container-->

css
1.bg{
2  background: url("../images/disgusting-fail-failure-2882.jpg") no-repeat center;
3  background-size: cover;
4  position: relative;
5  height:460px;
6  color: #fff;
7  font-size: 40px;
8  font-weight: bold;
9  margin-bottom:32px;
10  border-radius: 0.25em;
11}
12
13div.bg:nth-child(2) {
14  background: url("../images/bowl-centimeter-delicious-1332189-2.jpg") no-repeat center;
15}
16
17div.bg:nth-child(3) {
18  background: url("../images/argument-bench-breakup-984949-2.jpg") no-repeat center;
19}
20
21div.bg:nth-child(4) {
22  background: url("../images/close-up-duel-fingers-1249214.jpg") no-repeat center;
23}
24
25.bg::before{
26	background:#75f4f4;
27    opacity: 0.6;
28    position: absolute;
29	top: 0;
30	right: 0;
31	bottom: 0;
32	left: 0;
33	content: ' ';
34    border-radius: 0.25em;
35}
36

目指している形

行動規範の内容に同意します

回答2件

ベストアンサー

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

CSS
1/*背景のベース*/
2.bg{
3  background-repeat: no-repeat;
4  background-position: center center;
5  background-size: cover;
6  position: relative;
7  height:460px;
8  color: #fff;
9  font-size: 40px;
10  font-weight: bold;
11  margin-bottom:32px;
12  border-radius: 0.25em;
13}
14
15/*背景画像の個別指定*/
16div.bg:nth-child(1) {
17  background-image: url("../images/disgusting-fail-failure-2882.jpg");
18}
19
20div.bg:nth-child(2) {
21  background-image: url("../images/bowl-centimeter-delicious-1332189-2.jpg");
22}
23
24div.bg:nth-child(3) {
25  background-image: url("../images/argument-bench-breakup-984949-2.jpg");
26}
27
28div.bg:nth-child(4) {
29  background-image: url("../images/close-up-duel-fingers-1249214.jpg");
30}
31
32/*色ベタのベース*/
33.bg::before{
34    //opacity: 0.6;
35    position: absolute;
36    top: 0;
37    right: 0;
38    bottom: 0;
39    left: 0;
40    content: ' ';
41    border-radius: 0.25em;
42}
43
44/*色ベタの個別指定*/
45div.bg:nth-child(1)::before {
46  background-color: rgba(xxx,xxx,xxx,0.6); //rgbaで透過色を指定
47}
48div.bg:nth-child(2)::before {
49  background-color: rgba(xxx,xxx,xxx,0.6); //rgbaで透過色を指定
50}
51div.bg:nth-child(3)::before {
52  background-color: rgba(xxx,xxx,xxx,0.6); //rgbaで透過色を指定
53}
54div.bg:nth-child(4)::before {
55  background-color: rgba(xxx,xxx,xxx,0.6); //rgbaで透過色を指定
56}

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

投稿2019/09/15 21:04

編集2019/09/15 21:15

aKusano

総合スコア3763

退会済みユーザー

2019/09/16 07:55

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

行動規範の内容に同意します

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

追記

CSS
1.bg{
2  background: url("../images/disgusting-fail-failure-2882.jpg") no-repeat center;
3  background-size: cover;
4  position: relative;
5  height:460px;
6  color: #fff;
7  font-size: 40px;
8  font-weight: bold;
9  margin-bottom:32px;
10  border-radius: 0.25em;
11}
12
13div.bg:nth-child(2) {
14  background: url("../images/bowl-centimeter-delicious-1332189-2.jpg") no-repeat center green;/*色を追加（green）*/
15}
16
17div.bg:nth-child(3) {
18  background: url("../images/argument-bench-breakup-984949-2.jpg") no-repeat center blue;/*色を追加（blue）*/
19}
20
21div.bg:nth-child(4) {
22  background: url("../images/close-up-duel-fingers-1249214.jpg") no-repeat center red;/*色を追加（red）*/
23}
24
25.bg::before{
26    /*background:#75f4f4; 消す*/
27    opacity: 0.6;
28    position: absolute;
29    top: 0;
30    right: 0;
31    bottom: 0;
32    left: 0;
33    content: ' ';
34    border-radius: 0.25em;
35}