div的边框上的中心图像

我试图达到这样的设计：
黑圈是一个图像（忽略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>

来源

2017-05-03 Alexander Pilz

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

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

另请参阅：https：//jsfiddle.net/0ydygqmz/16/ –

试试这个：

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

来源

2017-05-03 13:21:11

我编辑我的答案...我在图像上做了圆圈 –

完美的作品！非常感谢你。 –

.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

来源

2017-05-03 13:18:49 margarita

使用CSS变换这样的..

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

https://jsfiddle.net/Lxwm2aq4/

来源

2017-05-03 13:21:48 ZimSystem

只要改变你.manager-portrait类这样的：

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

来源

2017-05-03 13:23:11 Phantom

div的边框上的中心图像

回答

相关问题