如何屏蔽矩形内的半圆并通过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>