Html 在基础内容图像上覆盖div背景图像

当存在包装器div的背景图像时，我试图在包装器div内隐藏image/

I

标记。基本上，在包装器div内部，当包装器div的背景中没有图像时，会有一个图标。但是，当将背景图像设置为包装器div时，背景图像应该重叠，从而将图标隐藏在div内部

我的问题是，图标和div背景颜色都显示在一起

HTML

<div class="img-fluid rounded-circle avatar">
    <i class="material-icons icon">account_circle</i>
</div>

.avatar {
    width: 40px;
    height: 40px;
    border: 1px solid cadetblue;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: cadetblue;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;
}

.icon {
}

您可能无法将其设置为

i

元素位于

背景图像的后面。但是您可以这样做-如果您知道什么时候有
背景图像，什么时候没有，您可以决定使用
z-index
将
i
元素隐藏在其父元素后面

请参见下面的演示：


.wrapper{
显示：内联块；
边框：1px实心；
利润率：10px；
填充：10px；
}
.阿凡达{
边框：1px实心卡德蓝；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：卡德蓝；
背景位置：50%50%；
背景尺寸：封面；
位置：相对位置；
}
.bck图像{
背景图像：url（“http://placehold.it/50x50");
}
.img-fluid.avatar{
宽度：40px；
高度：40px；
}
.我的图标隐藏.图标{
z指数：-1；
}

带背景图像
会计圈

z指数：-1
会计圈
没有背景图像
会计圈

z指数：-1
会计圈
您可以在这里使用伪元素
：：after
作为背景图像，它将覆盖任何存在的子元素，无论它是
i
还是
img


.avatar{
边框：1px实心卡德蓝；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
}
.阿凡达：：之后{
内容：''；
位置：绝对位置；
左侧：0；顶部：0；右侧：0；底部：0；
背景位置：50%50%；
背景尺寸：封面；
边界半径：继承；/*添加以防止溢出*/
溢出：隐藏；/*添加以防止溢出*/
}
.bck映像：：之后{
背景图像：url（“http://placehold.it/100/f00");
}
.img-fluid.avatar{
宽度：40px；
高度：40px；
}

会计圈
会计圈
ZIndex可能是一种解决方案，但不起作用。已尝试如何切换背景图像。它是否绑定到某个事件@阿扬。我认为当前的结构是不可能的。目前它还没有绑定，我正在测试通过设置
背景图像
来更改包装器的css。如果当前的结构不可能，请随时指导我。如果有图像标记而不是
i
tag怎么办？请查看此提琴：。让我知道这是否是一个适当的方式。谢谢你的所有帮助，希望我能接受你的两个答案。我学到了新的经验也许这本书也会很好，谢谢！简洁，信息丰富，绝对是一本好书。再次感谢。：）在处理z轴时，我会记住这些。好的！顺便说一句，我试了一把小小提琴，不知怎么的，它没有使用任何额外的标记或伪元素就成功了。检查这把小提琴：。注释掉背景图像，看它是否工作。@Ayan你也可以这样做：）只要你不需要背景color@Ayan还要注意的是，使用z-index会导致其他问题，而我的不正确。你能为我和其他人提一下这些问题以备将来参考吗？@kukkuz这就是为什么我在上面的评论中添加了一个链接并这么说：）