css 二枚の画像を重ねて背景は透明、で浮き上がる画像にしたい

添付のような画像をcssで表現したいです。
風景画像に透明opacityやrgbaをかけたんですが
人物がくっきり映らなく・・

背景を少し透過しつつ人物をくっきりさせたいです。
画像が人物画像と風景画像の二枚あります

理想↓

私が書いたコードで表現されたもの↓

html

css
.toumei{
position: relative;
}
.toumei2{
position: absolute;
top:0;
left:0;
background: rgba(0,0,0,0.8);
opacity:0.5;
}

Lhankor_Mhy

2020/10/03 00:42

それぞれの画像をご提示ください。ひとつめは、もしかして画像の重ね合わせではなくて、プロジェクタか何かで実際に画像を投射していませんか？

hatena19

2020/10/03 00:47

重ねる前の２つの画像も提示してもらった方か状況を把握しやすいです。見た感じでは、人物の画像を toumei1 に、風景の画像を toumei2 の方に設定すればいいように思います。

sora135

2020/10/03 00:49

写真を追加いたしました。人物画像をtoumei1に、風景画像をtoumei2でクラス指定しています。

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

回答1件

ベストアンサー

状況がかなり把握できました。htmlに人文画像を追加して、その画像を重ねてそれに透過を設定すれば近い感じにはできます。

html
1<div class="toumei">
2<img src="/705_00.jpg" alt="" class="toumei1">
3<img src="/AdobeStock_335510423.jpeg" alt="" class="toumei2">
4<img src="/705_00.jpg" alt="" class="toumei1">
5</div>

css
1.toumei{
2position: relative;
3}
4.toumei2{
5position: absolute;
6top:0;
7left:0;
8opacity:0.5;
9}
10.toumei3{
11position: absolute;
12top:0;
13left:0;
14opacity:0.3;
15}