Html 如何创建内部带有徽标的CSS半圆？

我想创建一个页脚，在上面的部分有一个半圆的中心与一个标志内。这里有我的示例代码，但问题是徽标绑定在页脚div的高度上

html，
身体，
.货柜，
.内容{
身高：100%；
}
.货柜，
.内容{
位置：相对位置；
}
.适当的内容{
位置：绝对位置；
填充顶部：40px；
/*>=导航栏高度*/
}
.包装纸{
位置：绝对位置；
最小高度：100%；
高度：自动！重要；
身高：100%；
保证金：0自动-100px；
/*与页脚相同*/
}
.推{
高度：100px；
/*与页脚相同*/
}
.页脚标志{
高度：200px；
宽度：100%；
位置：绝对位置；
背景图片：url（“gaslogo.png”）；
背景位置：10%100%；
z指数：999；
}
.页脚包装{
位置：相对位置；
高度：200px；
背景色：红色；
}
.半圆形底座{
位置：相对位置；
高度：100px；
宽度：250px；
边界半径：0 0 100px 100px；
-moz边界半径：0 0 100px 100px；
-webkit边界半径：0 0 100px 100px；
背景：白色；
}

dsad

我使用了一个

：before

伪元素，背景图像为圆

.footer{
背景：深红色；
高度：100px；
边缘顶部：100px；
文本对齐：居中；
}
.页脚：之前{
内容：“；
显示：内联块；
垂直对齐：顶部；
宽度：100px；
高度：100px；
背景：深红色url（“https://i.stack.imgur.com/Fogjj.jpg）中心/盖；
边框：10px纯白；
边界半径：50%；
框大小：边框框；
利润上限：-50px；
}

---

我通过这种方式完成了您所需要的：

稍微更改了您的HTML：

<div class="footer-wrap">

    <div class="halfCircleBottom">

            <img src="insert your image with the same width as the parent div"/>

    </div>

            <footer>
                        <center>

                        </center>
            </footer>

</div><!--end footer wreap-->

试试这个

HTML:

---

示例：

谢谢您的快速回复，这就是我要找的。

footer {
    background: black;
    height: 100px;
}

.halfCircleBottom{
    position: absolute;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    background: white;
    left: 50%;
    transform: translate(-50%, -72%);
}

<div class="content">content</div>
<div class="footer"></div>

.content{
  height: 200px;
  text-align: center;
  background: #fff;
}

.footer{
  height: 100px;
  background: #cf9f3f;
  position: relative;
  text-align: center;
}

.footer:before{
  content: '';
  width: 100px;
  text-align: center;
  height: 100px;
  border-radius: 50%;
  background: #cf9f3f;
  border: 4px solid #fff;
  position: absolute;
  left: 0;
  right: 0;
  margin: -52px auto 0;
}