如何在图像顶部创建弯曲的背景

Question

I have this design

How can I make the blue curved background on top of the image ( I need the transparency as well ) ?

I started it with a different backgournd but I don't know where to go from there. Any help will be really appreciated.

 .bg { background-image:url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg"); max-width: 100%; height: 200px; background-size: cover; background-position: center; position: relative; } .bluebg { background-color: blue; position: absolute; } 

 <div class="bg"> <div class="bluebg"> </div> </div> 

https://jsfiddle.net/0rsLxtw5/7/

Answer 1

I changed your HTML like the parent as child and child as parent.

 .bg { background-image: url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg"); max-width: 100%; height: 200px; background-size: cover; background-position: center; position: relative; -webkit-clip-path: circle(50% at 98% 50%); clip-path: circle(50% at 98% 50%); } .bluebg { background-color: blue; position: absolute; height: 200px; width: 100%; } 

 <div class="bluebg"> <div class="bg"> </div> </div> 

Answer 2

I hope the below-given snippet helps!

 .bg { background-image: url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg"); height: 200px; background-size: cover; background-position: center; overflow: hidden; } .bluebg { background: rgba(135, 206, 235, 0.5); height: 140%; width: 90%; -webkit-mask-image: radial-gradient(circle at right, transparent 0, transparent 30%, black 30px); mask-image: radial-gradient(circle at right, transparent 0, transparent 30%, black 30px); } 

 <div class="bg"> <div class="bluebg"></div> </div>