CSSのbackground-colorを反映して、header-wrapの背景画像を透過させるにはどうすれば良いか。

.header-wrapのbackground-color { rgba(255, 255, 255, 0.5) }がサイトの見た目に反映されません。デベロッパーツールには反映されています。どこに原因があるのでしょうか。
＊サイトは架空のものです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charest="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>カメむすび</title>
8 <link rel="stylesheet" href="css/reset.css">
9 <link rel="stylesheet" href="css/style.css">
10</head>
11
12<body>
13 <!--　ヘッダー　-->
14 <div class="wrap">
15  <div class="header-wrap">
16   <div class="header-container">
17      <header class="header">
18      <!--　ヘッダーロゴ　-->
19        <h1><a href="#"><img src="img/icon_042050_64.png" alt="カメのアイコン" class="header-logo"></a></h1>
20   <!--　ヘッダーナビ　-->
21         <nav class="header-nav">
22         <ul>
23            <li><a href="#">里親募集</a></li>
24            <li><a href="#">イベント</a></li>
25            <li><a href="#">ボランティア・求人募集</a></li>
26            <li><a href="#">お問い合わせ</a></li>
27         </ul>
28         </nav>                   
29     </header>
30  <!--　ファーストビューの文章　-->
31  <div class="bg">
32    <div class="bg_text">
33     <p class="header-text">カメと人が安心して暮らせる社会へ</p>
34  </div>
35  </div>
36   </div>
37 </div>
38</div>
39 <!--　メッセージ　-->
40 <!--　里親さんを待っているカメたち　-->
41 <!--　お問い合わせ　-->
42　<!--　フッター　-->
43    
44    
45    
46</body>

CSS
1* {
2  margin: 0;
3  padding: 0;
4}
5
6body {
7  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", serif;
8}
9
10.wrap {
11  overflow: hidden;
12}
13
14.header-wrap {
15  background-image: url(../img/turtle-1280.jpg);
16  background-color: rgba(255, 255, 255, 0.3);
17  background-repeat: no-repeat;
18  background-size: cover;
19  background-position: center;
20  width: 100%;
21  height: 95vh;
22  position: relative;
23}
24
25.header-container {
26  max-width: 1100px;
27  margin: 0 auto;
28}
29
30.header {
31  display: flex;
32  justify-content: space-between;
33  align-items: center;
34  padding-top: 20px;
35}
36
37.header-logo {
38  height: 80px;
39}
40
41.header-nav ul {
42  display: flex;
43  justify-content: flex-end;
44}
45
46.header-nav ul li {
47  list-style: none;
48  margin: 0 30px;
49}
50
51.header-nav ul li a {
52  text-decoration: none;
53  color: #000;
54  font-size: 18px;
55}
56
57.header-text {
58  position: absolute;
59  top: 40%;
60  left: 15%;
61  width: 70%;
62  font-size: 48px;
63  text-align: center;
64}

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

回答1件

どこに原因があるのでしょうか。

背景画像と背景色を同時に指定すると、背景色より手前に背景画像が表示されます。

背景と枠線 - ウェブ開発を学ぶ | MDN

複数の背景を使うといいかもしれません。

複数の背景画像 | 背景と枠線 - ウェブ開発を学ぶ | MDN

投稿2021/12/22 08:10

編集2021/12/22 08:24

Lhankor_Mhy

総合スコア36163

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

CSSのbackground-colorを反映して、header-wrapの背景画像を透過させるにはどうすれば良いか。

関連した質問