Как маскировать полукруги внутри прямоугольника и маскировать через css?

Question

У меня есть фоновое изображение и прямоугольник, сделанный в css над ним. То, что мне нужно, две полукружки должны маскироваться через этот прямоугольник, и фоновое изображение должно быть видно через этот прямоугольник, как показано на изображении.

Answer 1

Вы можете сделать это, как этот

HTML:

<div id="wrapper"> 
    <div id="rect"></div> 
    <div id="a">  
    </div> 
    <div id="b"> 
    </div> 
</div> 

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); 
} 

FIDDLE

Выход:.

Изменение цвета и изображения, как вы хотите !!!!

Также проверьте следующее: https://stackoverflow.com/a/17751125/1542290

Answer 2

Вы можете сделать это, контролируя непрозрачность прямоугольника. Что-то вроде этого: (0% Непрозрачность = 100% прозрачный) и 1 (100 Непрозрачность = 0% прозрачный)

Answer 3

Ниже приведен код 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; 
} 

и HTML разметки следующим

<div class="bckgrnd"> 
    <div class="rect"> 
     <div class="semi right"></div> 
     <div class="semi left"></div> 
    </div> 
</div>