Question

我正在努力实现这个设计：
黑圈是一个图像（忽略rectangel）。我现在不知道如何使这个工作，e。 G。将圆圈对准边界。也许你们中的一些人可以做到这一点？我做了jsfiddle所以你可以玩它。

StackOverflow的HTML：

 <div class="container">
    <div class="manager-textbox">
      <img src="http://www.altpress.com/images/uploads/news/Hello_Kitty.jpg" class="manager-portrait" style="height:100px">
      <div class="manager-text">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor malesuada mauris, sit amet tempus erat dictum eget.
          In eleifend arcu augue. Quisque enim est, eleifend vitae est nec, gravida congue ligula. Proin id convallis
          turpis.
        </p>
      </div>
    </div>       
  </div>

Answer 1

试试这个：

<强> DEMO HERE

<强> CSS

// managers
.manager-headline {
    font-size: 24px;
    color: $xcellent-blue;
    text-align: center;
}

.manager-textbox {
    background-color: #f4f6f9;
    box-shadow: 0 -3px 0 0 #303f9f;
    position: relative;
    margin-top: 60px;
}

.manager-text {
    margin-top: 40px;
    padding-top: 90px;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
}

#manager  .teaser-header-what {
    padding-left: 0px;
}
.manager-portrait {
 position: absolute;
 top: -50px;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 border-radius: 50%;
 border: solid 2px red;
}

Answer 2

＆＃13;

.first{
  width: 100%;
  position: relative;
  height: 300px;
  background-image: url("http://stuffpoint.com/sea-and-beach/image/27652-sea-and-beach-summer.jpg");
  background-repaet: no-repeat;
  background-size: cover;
}
.second{
  width: 100%;
  height: 500px;
  position: relative;
  background: pink;
}

.imageContainer{
  position: relative;
  width: 100px;
  top: -30px;
  background: yellow;
  height: 100px;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  background-image: url("http://i2.cdn.cnn.com/cnnnext/dam/assets/130203065116-beyonce-12-super-169.jpg");
  background-position: center;
  background-size: cover;
  border: 4px solid pink;
}

＆＃13;

<div>
  <div class="first">
    
  </div>
  <div class="second">
    <div class="imageContainer">
      
    </div>
  </div>
</div>

＆＃13;

检查一下，它是类似的： Image position divided in half

Answer 3

像这样使用CSS转换..

.manager-portrait {
 position: absolute;
 left: 50%;
 transform:translate(-50%,-50%);
}

https://jsfiddle.net/Lxwm2aq4/

Answer 4

只需将.manager-portrait课程更改为：

.manager-portrait {
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    border: 3px solid;
}

在div的边界的中心图象

4 个答案: