如何将背景图像直接放入div

Question

我有一个这样的 div：

现在我需要从这个形状中删除一部分圆圈，如下所示：

因此最终的形状应该是这样的：

所以我决定把图片作为我的div的背景。

<div class="col-4 customBack">  
    <div class="mainInfo">
        <div class="circle2">
            <img src="https://sitename.com/images/image.png">   
        </div>
        <div class="paraDivRight2">
            <h6 style="margin-top:5px;"><strong>Lorem Ipsum Dolor Simit</strong></h6>
            <hr style="margin-top:-5px;">
            <p style="margin-top:-10px;">012-3456789</p>
            <p style="padding-top:5px;">ifno@sitename.com</p>
        </div>
    </div>
</div> 

以下是样式：

.mainInfo{
    background-color: #fff;
    border: .01rem round #e0e1ed;
    border-radius: 20px;
    color: #585CA1;
    width:100%;
    height:5em;
    box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
    margin-top: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.customBack{
    background-image: url("/img/shadow3.png") !important;
}

.circle2 {
    position: relative;
    left:-60%;
    width: 9em;
    height: 9em;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}

.circle2 img {
    position: absolute;
    max-width: 85%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.paraDivRight2 {
    position: absolute;
    display: inline-block;
    padding: 10px;
    color:black;
    top:0px !important;
    padding-top:50px !important;
    right: 20px;
    text-align: right;
    padding-right:50px !important;
}

.paraDivRight2 p {
    line-height: 1em;
    font-size: 10pt;
    margin: 0;
    letter-spacing: 1px;
}

如您所见，我已将背景放在.customBack 类中，但结果现在看起来像这样：

所以问题是，我怎样才能正确地将这个背景图像（shadow3.png）作为这个mainInfo div 的背景图像，这样需要移除的圆形一侧不会出现......

我真的被这个困住了，所以请帮帮我......

Answer 1

• 在包装元素上使用 CSS filter: drop-shadow() MDN Docs。
• 修复类命名以使用friendlier convention
• 使用 CSS flex 更简单地对齐元素
• 停止使用内联 HTML style 属性

/* Quick Reset */

* {
  margin: 0;
  box-sizing: border-box;
}

.custom {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.custom-image {
  width: 9em;
  height: 9em;
  background: #fff;
  border-radius: 50%;
  padding: 1em;
}

.custom-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.custom-content {
  position: relative;
  background: #fff;
  padding: 1em;
  text-align: right;
  border-radius: 0 1em 1em 0;
  padding-left: 2em;
  left: -1em;
}

.custom-content h4 {
  border-bottom: 1px solid #ddd;
}

<div class="custom">
  <div class="custom-image">
    <img src="https://i.stack.imgur.com/qCWYU.jpg?s=256&g=1">
  </div>
  <div class="custom-content">
    <h4>Lorem Ipsum Dolor Simit</h4>
    <p>012-3456789</p>
    <p>ifno@sitename.com</p>
  </div>
</div>

Answer 2

我不是 100% 确定这一点，但它在过去对我有用，尝试将 div 的 position 属性设为相对，并将其设为图像的绝对值，然后适当调整大小。