Q&A
#実現したいこと
画像の部分のみグレイアウトして、その上に"終了"という文字を表示させたい
グレイアウト：#000 50%
#発生している問題
下のコンテンツも一緒にグレイアウトされてしまう
下のテキストを書いている部分も一緒にグレイアウトされてしまっています
画像のみに適用したいです
#ソースコード
HTML
1<div class="thum closed"> 2 <img src="#"> 3</div> 4<div> 5 <div> 6 <p>テキスト</p> 7 </div> 8 <p>テキスト</p> 9</div>
CSS
1 2thum img { 3 width: 100%; 4} 5.closed::after{ 6 content: ''; 7 position: absolute; 8 top: 0; 9 right: 0; 10 bottom: 0; 11 left: 0; 12 background-color: #000; 13 opacity: 0.5; 14 display:block 15}
#最後に
ぜひご教授お願い致します
回答1件
0
.thum に position: relative; が必要なのでは？
【position - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/position
投稿2021/10/07 09:31
総合スコア69458
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。