Question

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

html,
body,
.container,
.content {
  height: 100%;
}
.container,
.content {
  position: relative;
}
.proper-content {
  position: absolute;
  padding-top: 40px;
  /* >= navbar height */
}
.wrapper {
  position: absolute;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -100px;
  /* same as the footer */
}
.push {
  height: 100px;
  /* same as the footer */
}
.footer-logo {
  height: 200px;
  width: 100%;
  position: absolute;
  background-image: url("gaslogo.png");
  background-position: 10% 100%;
  z-index: 999;
}
.footer-wrapper {
  position: relative;
  height: 200px;
  background-color: red;
}
.halfCircleBottom {
  position: relative;
  height: 100px;
  width: 250px;
  border-radius: 0 0 100px 100px;
  -moz-border-radius: 0 0 100px 100px;
  -webkit-border-radius: 0 0 100px 100px;
  background: white;
}

<head>
  <link rel="stylesheet" type="text/css" href="test.css">
</head>

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
    </div>
  </div>
</div>
<div class="container">
  <div class="content">
    <div class="logo"></div>
    <div class="wrapper"></div>
    <div class="push"></div>
  </div>
  <div class="footer-logo">dsad</div>
  <div class="footer-wrapper">
    <footer>
      <center>
        <div class="halfCircleBottom"></div>
      </center>
    </footer>
  </div>

Answer 1

我使用了:before伪元素和圆圈的背景图片。

.footer {
  background: crimson;
  height: 100px;
  margin-top: 100px;
  text-align: center;
}
.footer:before {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 100px;
  background: crimson url("https://i.stack.imgur.com/Fogjj.jpg") center / cover;
  border: 10px solid white;
  border-radius: 50%;
  box-sizing: border-box;
  margin-top: -50px;
}

<footer class="footer"></footer>

Answer 2

我用这种方式完成了你需要的东西：

稍微更改了您的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-->

然后添加并更改了一个css声明：

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

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

Answer 3

试试这个

HTML：

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

CSS：

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

示例：https://jsfiddle.net/vc4mvwd2/

如何在里面创建一个带有徽标的CSS半圆？

3 个答案: