圆形，透明的剪切区域和背景图像，CSS？

Question

我正在尝试编写附加的布局（需要响应，如果可能，不要使用JavaScript）。我想支持IE8，否则，优雅的降级解决方案会很棒。

我找到了使用伪元素和border-radius制作半圆切口的方法，但是前一个div的背景图像需要显示出来，我无法弄清楚如何做到这一点。请帮忙！！我已经突出显示了背景图像所覆盖的区域，以防它不清楚。 Here is the layout

我到目前为止：https://jsfiddle.net/dcwoLb7f/

HTML：

<div id="first"><p>IMAGE CREDIT: WIKIPEDIA</p></div>
<div id="second"></div>

CSS：

#first {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/5/5a/VirtuellesStudio_Greenbox.jpg');
    background-size: cover;
    position: relative;
}
p {
    color: white;
    text-align: center;
    margin: auto;
    font-size: 40px;
}
#first, #second {
    width: 100%;
    height: 200px;
}
#second {
    background-color: blue;
}
#first:after {
    content: '';
    background-color: white;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%, 0);
}