html,cssの背景画像を暗くする

前提・実現したいこと

Airbnbというサイトの模写をしているのですが、文字が見えやすいように背景画像を::beforeで暗くし、中のh1を見やすくしたい。

発生している問題・エラーメッセージ

::beforeで暗くした際に中のh1までも暗くなってしまった。またh1の親のdivをposition:absolute;にすると、見えやすくはなったが背景などが切れてしまった。

該当のソースコード

html
1<body>
2
3    <header>
4      <ul>
5        <li ><a href="#">概要</a></li>
6        <li class="dot"><a href="#">・</a></li>
7        <li><a href="#">準備</a></li>
8        <li class="dot"><a href="#">・</a></li>
9        <li><a href="#">安全</a></li>
10        <li class="dot"><a href="#">・</a></li>
11        <li><a href="#">マネープラン</a></li>
12    </ul>
13    </header>
14
15    <main>
16      <div class="main-first">
17        <div class="main-txt">
18          <h1>Airbnbホストになって、暮らしをレベルアップ </h1>
19        </div>
20      </div>
21    </main>
22
23    <footer>
24
25    </footer>
26
27  </body>

css
1//common
2*{
3  box-sizing: border-box;
4  font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
5  font-size: 14px;
6  line-height: 1.43;
7  color: #484848;
8  ul {
9    list-style: none;
10    margin: 0;
11  }
12}
13
14//small screen
15header {
16  display: none;
17  height: 50px;
18  width: 100%;
19  position: fixed;
20  z-index: 10;
21  ul {
22    padding-left: 24px;
23    height: 52px;
24    line-height: 50px;
25    display: flex;
26    font-size: 14px;
27    font-weight: 600;
28    a {
29      color: #484848;
30    }
31    li {
32      margin-bottom: 2px;
33      .dot {
34        font-weight: 100;
35        margin: 0 0.5px;
36      }
37      &:nth-child(1) {
38        border-bottom: solid 2px rgb(0, 132, 137);
39        a {
40          color: rgb(0, 132, 137);
41        }
42      }
43    }
44  }
45}
46
47main {
48  .main-first {
49    width: 100%;
50    background-image: url(../img/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg);
51    background-size: cover;
52    padding: 144px 24px 17px;
53    position: relative;
54    &::before {
55      background:linear-gradient(to bottom,rgba(0,0,0,0) 40%, rgba(0,0,0,0.5));
56      position: absolute;
57      top: 0;
58	    right: 0;
59	    bottom: 0;
60	    left: 0;
61	    content: ' ';
62    }
63    .main-txt{
64      /* position: absolute;
65      top: 144px;
66      right: 24px;
67      left: 24px;
68      bottom: 24px; */
69      h1 {
70        font-size: 34px;
71        font-weight: 800;
72        letter-spacing: -1px;
73        line-height: 36px;
74        color: white;
75      }
76    }
77  }
78}
79
80footer {
81
82}

試したこと

レスポンシブの幅が600pxで行っています。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

画像で指定しているなら暗い画像を指定すればいいのでは？

投稿2020/02/21 05:00

yambejp

総合スコア116724

ベストアンサー

テキストのブロックを z-index で前面にもってこればいいでしょう。

scss
1    .main-txt{
2      position: relative;
3      z-index: 11;
4      h1 {
5        font-size: 34px;
6        font-weight: 800;
7        letter-spacing: -1px;
8        line-height: 36px;
9        color: white;
10      }
11    }