2017-05-03 97 views
0

我試圖達到這樣的設計: enter image description here
黑圈是一個圖像(忽略rectangel)。我現在沒有如何得到這個工作,例如。 G。將circel定位在邊界上。也許你們有些人可以做到這一點?
我做了一個jsfiddle,所以你可以玩它。div的邊框上的中心圖像

HTML的StackOverflow的:

<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> 
+0

檢查此人:http://stackoverflow.com/questions/43760364/image-position-divided-in-half/43760589#43760589 – margarita

+1

已更新您的[* JSFiddle *](https://jsfiddle.net/ vivekkupadhyay/0ydygqmz/6) – vivekkupadhyay

+0

另請參閱:https://jsfiddle.net/0ydygqmz/16/ –

回答

2

試試這個:

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; 
} 
+0

我編輯我的答案...我在圖像上做了圓圈 –

+0

完美的作品!非常感謝你。 –

2

.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; 
 
}
<div> 
 
    <div class="first"> 
 
    
 
    </div> 
 
    <div class="second"> 
 
    <div class="imageContainer"> 
 
     
 
    </div> 
 
    </div> 
 
</div>

檢查這一項,它是相似的: Image position divided in half

1

只要改變你.manager-portrait類這樣的:

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