如何在CSS中的圆div中裁剪图像？

Question

您好，我想在div中裁剪图像，该div分为圆圈中的两个部分。一边是半裁剪的照片，另一边是背景颜色，上面有名字。我目前正在使用以下代码： 宽度：220px;

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

Answer 1

如果您的图片位于您正在应用该样式的div元素内，则只需将overflow: hidden添加到CSS中。

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

造型。

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

我在这里为您创建了一个示例：

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

Answer 2

overflow: hidden以及更多定位，z-index和object-fit可以帮助您实现这一目标。

以下是您的一个示例（重新阅读您的问题后编辑）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。

Answer 3

您可以使用以下内容

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

Answer 4

您可以按照以下步骤执行此操作：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;