如何在CSS圆圈专区内裁剪图像？

-2

您好，我想裁剪图像内部分为两部分在一个圆圈。一边是成功的一半裁剪PIC和对方只是背景色与它的名字。我目前使用下面的代码：宽度：220px;

userdp { 
    height: 220px; 
    border: 4px solid red; 
    border-radius: 50%; 
    position: relative; 
    object-fit: none; 
}

来源

2017-03-17 Nouman Saeed

请，显示代码，你想要得到的结果， – margarita

的是一些名称将是太长？你有想过吗？ –

编辑我的回答略有下降。检查更新的一个。 –

如果你的形象是你申请的是造型为下面你应该只需要添加overflow: hidden到CSS的div元素中。

<div class="userdp"> 
    <img src="..." /> 
</div>

而造型。

.userdp { 
    height: 220px; 
    width: 220px; 
    border-radius: 50%; 
    overflow: hidden; 
}

我创建了一个例子在这里为你：

https://jsfiddle.net/20g4uL0j/1/

来源

2017-03-17 11:18:37 anierzad

overflow: hidden多一点与定位，z-index玩，object-fit可以帮助你实现这一目标。

下面是一个例子（重新阅读您的问题后可进行编辑）：

.userdp { 
 
    height: 220px; 
 
    width: 220px; 
 
    border: 4px solid black; 
 
    border-radius: 50%; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.userdp-img { 
 
    z-index: 1000; 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
} 
 

 
.userdp-info { 
 
    z-index: 2000; 
 
    width: 50%; 
 
    height: 100%; 
 
    color: #ddd; 
 
    background-color: red; 
 
    border-right: 3px solid black; 
 
} 
 

 
.userdp-info-inner { 
 
    text-align: center; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.userdp-img, 
 
.userdp-info { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="userdp"> 
 
    <div class="userdp-info"> 
 
    <div class="userdp-info-inner"> 
 
     John Doe 
 
    </div> 
 
    </div> 
 
    <img src="https://unsplash.it/300/300?image=1005" class="userdp-img"> 
 
</div>

希望它帮助。

来源

2017-03-17 11:23:57

您可以使用以下

**HTML** 
<div class="circle"> 
<div class="image"> 
    <img src="your-image.png" /> 
</div> 
<div class="color">Text</div>

**CSS** 
.circle{ 
width: 220px; 
height:220px; 
border-radius: 50%; 
overflow:hidden; 
} 
.image, .color{ 
width:50%; 
float:left; 
height:100%; 
} 
.color{ 
background-color: #099; 
}

来源

2017-03-17 11:26:01

你可以做到这一点如下：

https://jsfiddle.net/ivan0013/f1a06cxe/

div { 
 
    background: #9e978e; 
 
    display: inline-block; 
 
    margin: 0 1em 1em 0; 
 
} 
 

 
.top, 
 
.bottom { 
 
    height: 55px; 
 
    width: 110px; 
 
} 
 

 
.right, 
 
.left { 
 
    height: 110px; 
 
    width: 55px; 
 
} 
 

 
.top { 
 
    border-top-left-radius: 110px; 
 
    border-top-right-radius: 110px; 
 
} 
 

 
.right { 
 
    border-bottom-right-radius: 110px; 
 
    border-top-right-radius: 110px; 
 
} 
 

 
.bottom { 
 
    border-bottom-left-radius: 110px; 
 
    border-bottom-right-radius: 110px; 
 
} 
 

 
.left { 
 
    border-bottom-left-radius: 110px; 
 
    border-top-left-radius: 110px; 
 
}

<div class="top"></div> 
 
<div class="right"></div> 
 
<div class="bottom"></div> 
 
<div class="left"></div>

来源

2017-03-17 11:28:30

如何在CSS圆圈专区内裁剪图像？

回答

相关问题