¿Cómo enmascarar semicírculos dentro de un rectángulo y enmascarar a través de css?

Tengo una imagen de fondo y un rectángulo hecho en css encima. Lo que necesito es que dos semicírculos deben enmascararse a través de este rectángulo y la imagen de fondo debe verse a través de este rectángulo como se muestra en la imagen.

introduzca la descripción de la imagen aquí

Puedes hacerlo asi

HTML:

CSS:

 #wrapper{ position:relative; width:312px; height:313px; background:url(http://i.stack.imgur.com/pZVTb.png); background-attachment: fixed; } #a{ position:absolute; right:0; height:120px; top:100px; border-top-left-radius:60px; border-bottom-left-radius:60px; width:60px; background:url(http://i.stack.imgur.com/pZVTb.png); background-attachment: fixed;} #b{ position:absolute; left:0; height:120px; top:100px; border-top-right-radius:60px; border-bottom-right-radius:60px; width:60px; background:url(http://i.stack.imgur.com/pZVTb.png); background-attachment: fixed; } #rect{ width:100%; height:56%; position:absolute; top:65px; background:rgba(120,0,23,.8); } 

VIOLÍN

Salida :

introduzca la descripción de la imagen aquí

Cambia el color y la imagen que quieras. !!!!

También revise esto: https://stackoverflow.com/a/17751125/1542290

Puedes hacer esto controlando la opacidad del rectángulo. Algo así: (0% de opacidad = 100% transparente) y 1 (100 de opacidad = 0% transparente)

El siguiente es el código css

 .bckgrnd{ background:url('image.jpg'); width:1000px; height:500px; } .rect{ position:relative; width:700px; height:200px; background:pink; opacity:0.5; top:100px; left:150px; } .semi{ height:100px; width:50px; background:url(image.jpg); background-attachment:fixed; position:absolute; top:40px; } .right{ left:0; border-radius :0 50px 50px 0; } .left{ right:0; border-radius :50px 0 0 50px; } 

y el html marca como sigue