Flex容器内图片背景透明设置无效，如何实现目标效果？

现有代码中，.usrcontainer作为Flex容器设置了背景色，导致.imgbkg内的用户头像图片后方也显示该背景色。尝试为.imgbkg设置background-color: transparent无效，需要实现图片区域无背景色，其余内容区域保留背景的效果。

解决思路 #

父容器的背景色会覆盖整个容器范围，子元素设置透明背景无法遮挡父容器的背景。因此核心思路是：将背景色仅应用到需要的内容区域，而非整个Flex容器。

具体修改方案 #

1. 调整HTML结构 #

在.usrcontainer内，将除.imgbkg外的所有内容包裹进一个新的容器（如.content-wrapper）：

<div class="usrcontainer">
    <div class="imgbkg"><img src="https://source.unsplash.com/random/105x105" alt="Foto usuário redondo"></div>
    <div class="content-wrapper">
        <p class="usrdscr">Name, <strong>Job</strong> <img src="https://source.unsplash.com/random/15x15"
            alt="Map pin"> 5Km
            <br><br>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus vero ex debitis eligendi sed
        non maxime vitae molestias aperiam quos.
        </p>
        <div class="cardpreco">
            <img class="stars" src="https://source.unsplash.com/random/200x15" alt="4 Estreas">
            <p class="price">R$200,00 / hora</p>
            <p class="pricenote">Lorem, ipsum dolor.</p>
        </div>
    </div>
</div>

2. 修改CSS样式 #

• 移除.usrcontainer的背景色和左右内边距
• 给新的.content-wrapper添加背景色和内边距，并设置flex:1占据剩余空间
• 调整.imgbkg的外边距，保持原有的左侧间距

main .usrcontainer {
    grid-area: usrdscr;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    /* 移除原有背景色和padding */
}

main .usrcontainer .content-wrapper {
    background-color: rgba(6, 6, 92, 0.335);
    padding-left: 15px;
    padding-right: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

main .usrcontainer .imgbkg {
    align-self: center;
    margin-left: 15px; /* 替代原容器的padding-left */
}

/* 保留原有其他样式 */
main .usrcontainer .imgbkg img {
    max-height: 105px;
}

main .usrcontainer p {
    color: black;
    align-content: center;
    padding-left: 20px;
    min-height: 130px;
}

main .usrcontainer .usrdscr {
    width: 100%;
}

main .usrcontainer .price {
    font-size: xx-large;
    max-width: 120px;
    text-align: left;
    padding-right: 40px;
}

main .usrcontainer .pricenote {
    text-align: left;
    align-content: end;
    padding-bottom: 10px;
}

main .usrcontainer .stars {
    justify-self: center;
    align-self: start;
    padding: 30px;
}

修改后，.imgbkg区域不再显示背景色，仅内容区域保留背景，完全匹配目标效果。

内容的提问来源于stack exchange，提问作者Milton Ventura