実現したいこと

以下のように画像（img）が２つの要素（div.bg1とdiv.bg2）にまたがって配置されているときに、div.bg1と重なる領域のみ透過度を変える方法はありますでしょうか。可能であれば、画像が回転（rotate）している時にも対応したいと考えております。

html
1
2<div class="background">
3  <img src="https://placehold.jp/24/ffeeee/ff8888/150x150.png">
4  <div class="bg1"></div>
5  <div class="bg2"></div>
6</div>

css
1.background {
2    display:flex;
3}
4.background img:first-child {
5  position: absolute;
6  top:50px;
7  left:450px;
8  transform: rotate(-45deg);
9}
10.bg1{
11  width: 500px;
12  height: 400px;
13  background-color: tomato;
14}
15.bg2{
16  width: 500px;
17  height: 400px;
18  background-color: blue;
19}
20

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

回答1件

ベストアンサー

同じ画像を重ねて、clip-path でそれぞれを逆に切り抜いて、片方を透明にするという方法は思いついた。

html
1<div class="background">
2  <img src="https://placehold.jp/24/ffeeee/ff8888/150x150.png">
3  <img src="https://placehold.jp/24/ffeeee/ff8888/150x150.png">
4  <div class="bg1"></div>
5  <div class="bg2"></div>
6</div>

css
1.background {
2  display:flex;
3}
4.background img {
5  position: absolute;
6  top:50px;
7  left:450px;
8  transform: rotate(-45deg);
9}
10
11.background img:first-child {
12  clip-path: polygon(84% 0, 100% 0, 100% 100%, 0 100%, 0 84%);
13}
14
15.background img:nth-child(2) {
16  clip-path: polygon(0 0, 84% 0%, 0 84%);
17  opacity: 0.5;
18}
19
20.bg1{
21  width: 500px;
22  height: 400px;
23  background-color: tomato;
24}
25.bg2{
26  width: 500px;
27  height: 400px;
28  background-color: blue;
29}