如何將背景圖像直接放入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> 

這是styles：

.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 class 但結果現在如下所示：

所以問題是，我怎樣才能正確地將這個背景圖像（ shadow3.png ）作為這個mainInfo div 的背景圖像，這樣需要移除的圓形側面就不會出現......

我真的被這個困住了，所以請幫助我......

Answer 1

• 在包裝器元素上使用 CSS filter: drop-shadow() MDN 文檔。
• 修復您的 class 命名以使用更友好的約定
• 使用 CSS flex 獲得更簡單的 alignment 元素
• 停止使用內聯 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; 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屬性設為相對，並將其設為圖像的絕對值，然后正確調整大小。