Q&A
再現できるソースを例示ください
コード ```### 実現したいこと 親要素の背景色を子要素に引き継がないように設定したい。 ### 発生している問題・分からないこと 要素①（親要素）にz-index指定1を指定していて、cssでopacity0.8を設定しています。 その上に要素②を配置し さらにその上に要素③（文字）を置いて文字をくっきり表示させたいですが 親要素の背景のopacity: 0.8; が要素③にも適用されてしまい、文字が透けてしまいます。 背景のbackground: #000000; opacity: 0.8;の記載は変えずに要素③の文字を透けないようにする設定方法が知りたいです。 ### 該当のソースコード
HTML
<!DOCTYPE HTML> <html> <head> <title>Sample</title> <meta charset="UTF-8" /> <link href="css/sample.css" rel="stylesheet" /> </head> <body style="background: red;"> <script> window.onload = function(){ const BG1 = document.createElement('div'); BG1.classList.add('BG'); BG1.style.display = "block"; document.body.appendChild(BG1); const Icon = document.createElement('div'); Icon.classList.add('setting'); Icon.innerHTML += '<div class="icon" >アイコン</div>'; Icon.innerHTML += '<div class="message">文字の表示</div>'; BG1.appendChild(Icon); } </script> </body> </html> ```css @charset "UTF-8"; .BG { display: none; position: fixed; width: 100%; height: 100%; background: #000000; opacity: 0.8; top: 0; left: 0; z-index: 1; } .setting { display: block; position: absolute; text-align:center; background-color: rgba(0, 0, 0, 0); padding: 20px 50px 40px 50px; margin: auto; width: 50%; height: auto; top: 35%; left: 0; right: 0; z-index: 2; } .icon { color: rgb(255, 255, 255) !important; width: 50px; height:50px; top: 35%; left: 0; right: 0; } .message { color: rgba(255, 255, 255) !important; opacity:1 !important; font-weight: bold; font-size: 15px; margin-top:30px; position:relative; z-index:999; }
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
要素③のCSSの記述を下記に変更
要素3 {
position: relative;
z-index: 999;
background-color: rgba(0,0,0,0) !important ;
opacity: 1 !important ;
}
補足
特になし
『その上に要素②を配置し』とありますが、この『上』とは親要素という意味ですか？それともHTMLの出現順位のことですか？または、重ね合わせのことでしょうか？
質問の編集を拝読。
『要素①（親要素）にz-index指定1を指定していて、cssでopacity0.8を設定しています』とのことでしたが、ご提示のコードでopacity0.8のものを見つけることができませんでした。
『要素①（親要素）』はご提示のコードで言うと、どれですか？
あ、0.5の間違いかな。
そうすると、yambejpさんの回答で大丈夫かな。
ありがとうございます。
要素①→要素②→要素③
→が右に行くほど上に表示させたいです。
要素③はscriptタグの文字の表示部分です。
補足ありがとうございました。
yambejpさんのご回答で解決するかと思いますが、ご不明の点があればコメントをしてみるのがいいかと思います。
回答2件
0
ベストアンサー
opacity は重ね合わせコンテキスト全体に適用されて、子孫要素だけキャンセルということはできません。
opacity の指定を消して、.BG の background を rgba(0, 0, 0, 0.8) にしましょう。
opacity を変更できないなら、BG1.appendChild(Icon); を document.body.appendChild(Icon); に変更しましょう。
投稿2024/01/25 22:18
編集2024/01/26 00:16
総合スコア21927
opacityの記述は変えれないので他の方法での解決方法を探しています。
なぜ opacity を消せないのでしょうか。
もし opacity を消せないなら、親子関係を変えるしかないです。例えば .setting の要素を .BG の子ではなく document.body の子にするとか。
.setting は <dialog> で、.BG は ::backdrop で実装するのが理想ですね。
回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。
あなたの回答
tips
プレビュー
