Q&A
「背景画像が背景色に被さり」とのことですが、ここで言う「背景色」とはどの要素の背景色ですか？
前提・実現したいこと
背景画像を半透明にし、上から背景色や文字、画像などを入れたいです。
下記ソースコードのページに一番後ろに画像を挿入したいです。
よろしくお願いいたします
発生している問題・エラーメッセージ
背景画像が背景色に被さり、画像が挿入されているものの見えない状態になっています。
該当のソースコード
<body> <header> <nav class="pc-nav"> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">D</a></li> </ul> </nav> </header> <div class="wrapper"> <div class="split Xray"> <div class="info"> <h2>X</h2> <a href="sampleX.html"><img src="images/矢印.png" width="180" height="75" alt=詳細></a> </div> </div> <div class="split Yankee"> <div class="info"> <h2>Y</h2> <a href="sampleY.html"><img src="images/矢印.png" width="180" height="75" alt=詳細></a> </div> </div> </div> </body>
試したこと
body{ background-repeat: no-repeat; background-size: cover; height: 100vh; background-image: url("背景にしたい画像"); } header { padding: 20px 4% 10px; position: fixed; top: 0; width: 100%; display: flex; align-items: center; background:linear-gradient(90deg,#1e90ff 0%, #1e90ff 50%, #b0c4de 50%, #b0c4de 100%); display: flex; justify-content: center; } a { text-decoration: none; color: #fff; } nav { margin: 0 0 0 auto; } ul { list-style: none; margin-right: 50px; display: flex; } li { margin: 0 0 0 30px; font-size: 14px; } @media all and (min-width: 500px){ .wrapper{ display: flex; } img{ margin-top: 100px; cursor: pointer; transition-duration: 0.3s; } img:hover{ opacity: 0.6; transition-duration: 0.3s; } h2{ font-family: cursive; font-size: 50px; color: #fff; margin-top: 60px; } .split{ height: 100vh; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; } .Xray{ background-color:#1e90ff; background-size: cover; } .Yankee{ background-color:#b0c4de; background-size: cover; }
補足情報（FW/ツールのバージョンなど）
ページの全貌がわかるように、直接関係のないコードも記載しています。
ページを大きく半分に分割しています。
コメントありがとうございます。
Xray Yankeeクラスそれぞれに指定している背景色です。
（#1e90ffと#b0c4de）
であれば、ご提示のコードを試してみましたが、「背景画像が背景色に被さり」という問題が再現しませんでした。
「背景にしたい画像」は background-color:#1e90ff の下にありました。
こちらの勘違いと説明に不備がありました、申し訳ありません。
ページ全体に画像を張り、その上から（左半分#1e90ff 右半分#b0c4de）の背景色を見えるようにしたいと思っています。
ご指摘いただいた通り、現状では裏に画像が隠れてしまい、background-colorを無効にしないと見えない状態です。
回答2件
0
ベストアンサー
おそらくご希望のことか下記のようなことかと推測しました。
Xray Yankeeクラスの背景色を半透明にして、bodyに設定して背景画像が透けて見えるようにしたい。
しかし、Xray Yankeeクラスの子要素(info)内のテキストや矢印.pngは半透明にはしたくない。
こういうことはよくあります。
Xray Yankeeクラスに opacity を設定して半透明にすると、子要素であるテキストや矢印.pngまで半透明になります。
そこで、解決法として疑似要素に背景色を設定して半透明にするという方法があります。
css
1 .Xray, .Yanke{ 2 position: relative; 3 } 4 .Xray::before, .Yankee::before { 5 content: ""; 6 position: absolute; 7 top: 0; 8 bottom: 0; 9 left: 0; 10 right: 0; 11 opacity: .5; 12 z-index:-1; 13 } 14 .Xray::before { 15 background-color:#1e90ff; 16 } 17 .Yankee::before { 18 background-color:#b0c4de; 19 }
よく考えたら、単純に背景色を透過色にすればいいか。
css
1 .Xray{ 2 background-color: rgba(31,143,255,0.5); 3 } 4 .Yankee{ 5 background-color: rgba(176,196,222,0.5);; 6 }
投稿2021/11/06 11:49
編集2021/11/06 12:00
総合スコア34075
0
単純に透過したいということであればopacityというプロパティがあります。
また色指定をrbgaにする方法もあるかと。
ただソースを見るにcssの当て方が少し古い気がするので、もし可能ならもう少し新しい書き方を調べてみたり、誰かに教えてもらう機会を用意できればいいんじゃないかと思います。
投稿2021/11/06 09:29
編集2021/11/06 09:33
総合スコア17
あなたの回答
tips
プレビュー
