画像のようにはならないようにしたい（文字が薄くならないようにしたい）

前提・実現したいこと

現状の画像のように、食べ物の画像をopacity: .6;にして、文字を画像の上に載せて
文字をはっきり見せたいです
↓現状

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

文字まで薄く見えてしまっていてきれいに見えない
希望は文字だけをはっきりさせたい。

試したこと

・画像のように、font-weightを使い、強調させようとしているが
強調されない
・色の変更なども試みていたが文字も薄くなる。（明るいオレンジだとはっきり薄くなりました。）

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<title></title>
5 <link rel="stylesheet" href="./css/style.css">
6</head>
7</head>
8<body>
9	<ul class="menu-list">
10		<li class="menu-item">
11			<div class="menu-item-img menu-item-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100"><img alt="お部屋1" src="../Menu/img/menu01.png"></div>
12			<div class="menu-item-txt menu-item-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
13				<div class="jp-text">
14					<h2 class="ttl">地元食材にこだわった会席料理</h2><!-- /.ttl -->
15					<p class="desc">みずみずしくほのかに甘い野菜、新鮮で味に深みがある魚介類、肉類。<br>
16					旬の素材をそのままに生かす、経験に裏打ちされた確かな技。<br>
17					四季ごと、日ごとに変化する味わいを、どうぞご堪能ください。</p>
18				</div><!-- /.jp-text -->
19			</div><!-- /.menu-item-right -->
20		</li><!-- /.menu-item -->
21	</ul>
22</body>
23</html>

css
1
2.menu-list {
3  -webkit-box-pack: justify;
4  -webkit-justify-content: space-between;
5      -ms-flex-pack: justify;
6          justify-content: space-between;
7  margin-top: 80px;
8}
9
10@media screen and (min-width: 600px) and (max-width: 1179px) {
11  .menu-list {
12    margin: 0px 20px;
13  }
14}
15
16@media screen and (max-width: 599px) {
17  .menu-list {
18    display: -webkit-box;
19    display: -webkit-flex;
20    display: -ms-flexbox;
21    display: flex;
22    -webkit-box-orient: vertical;
23    -webkit-box-direction: normal;
24    -webkit-flex-direction: column;
25        -ms-flex-direction: column;
26            flex-direction: column;
27    -webkit-box-align: center;
28    -webkit-align-items: center;
29        -ms-flex-align: center;
30            align-items: center;
31  }
32}
33
34.menu-item {
35  width: 100%;
36  display: -ms-grid;
37  display: grid;
38  -ms-grid-rows: 57px 216px 165px;
39  -ms-grid-columns: 367px 158px 655px;
40      grid-template: 57px 216px 165px/ 367px 158px 655px;
41}
42
43@media screen and (max-width: 599px) {
44  .menu-item {
45    display: block;
46    position: relative;
47  }
48}
49
50.menu-item:nth-of-type(2) {
51  margin: 84px auto;
52}
53
54.menu-item:nth-of-type(3) {
55  margin-bottom: 150px;
56}
57
58.menu-item-right {
59  grid-area: right;
60  -ms-grid-column: 2;
61  -ms-grid-column-span: 3;
62  grid-column: 2 / 5;
63  -ms-grid-row: 2;
64  -ms-grid-row-span: 2;
65  grid-row: 2 / 4;
66  padding-left: 150px;
67  /* 左余白 */
68}
69
70@media screen and (max-width: 599px) {
71  .menu-item-right {
72    padding-left: 0px;
73  }
74}
75
76.menu-item-left {
77  grid-area: left;
78  -ms-grid-column: 1;
79  -ms-grid-column-span: 2;
80  grid-column: 1 / 3;
81  -ms-grid-row: 1;
82  -ms-grid-row-span: 2;
83  grid-row: 1/3;
84  z-index: 999;
85}
86
87@media screen and (max-width: 599px) {
88  .menu-item-left {
89    z-index: 99900;
90    position: absolute;
91    top: 50%;
92    left: 50%;
93    -webkit-transform: translate(-70%, -50%);
94            transform: translate(-70%, -50%);
95  }
96}
97
98.menu-item-img {
99  width: 90%;
100  /* 画像サイズ指定 */
101}
102
103@media screen and (max-width: 599px) {
104  .menu-item-img > img {
105    opacity: .7;
106  }
107}
108
109.menu-item-txt {
110  background-image: url(../../../img/bg.png);
111  background-position: center;
112  background-size: cover;
113  z-index: -1;
114  -webkit-box-flex: 1;
115  -webkit-flex: 1;
116      -ms-flex: 1;
117          flex: 1;
118}
119
120@media screen and (max-width: 599px) {
121  .menu-item-txt {
122    background-image: none;
123  }
124}
125
126.menu-item-txt .jp-text {
127  padding-left: 52px;
128  /*  grid-area: right;
129                grid-column: 3/4;
130                grid-row: 2/3; */
131}
132
133@media screen and (max-width: 599px) {
134  .menu-item-txt .jp-text {
135    font-weight: bold;
136  }
137}
138
139.menu-item-txt .jp-text .ttl {
140  font-size: 2.4rem;
141  padding-top: 60px;
142}
143
144.menu-item-txt .jp-text .desc {
145  line-height: 1.5;
146  padding-top: 52px;
147  padding-bottom: 52px;
148}

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

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

回答1件

ベストアンサー

現状の画像のように、食べ物の画像をopacity: .6;にして、文字を画像の上に載せて

文字をはっきり見せたいです

下記の部分のことでしょうか。

css
1@media screen and (max-width: 599px) {
2  .menu-item-img > img {
3    opacity: .7;
4  }
5}

原因は、下記のような z-index を設定していることですね。

css
1@media screen and (max-width: 599px) {
2  .menu-item-left {
3    z-index: 99900;
4
5/* 以下略 */

css
1.menu-item-txt {
2  background-image: url(../../../img/bg.png);
3  background-position: center;
4  background-size: cover;
5  z-index: -1;
6
7/* 以下略 */

.menu-item-leftが、.menu-item-txtの前面にあるので、.menu-item-left内の画像も.menu-item-txtの前面に来てしまっているため、画像を透けてみている形になってます。

下記のように前後関係を入れ替えればテキストがはっきりと見えるようになります。

css
1@media screen and (max-width: 599px) {
2  .menu-item-left {
3    z-index: -1;
4
5/* 以下略 */

css
1.menu-item-txt {
2  background-image: url(../../../img/bg.png);
3  background-position: center;
4  background-size: cover;
5  z-index: 1;
6
7/* 以下略 */

投稿2021/12/06 13:38

hatena19

総合スコア33795

free_teku

2021/12/07 02:31

ご回答ありがとうございます。解決できました。とても嬉しいです。感謝いたします！！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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