我正在创建一个网站，但遇到了一个问题。我想创建一种展开的图库，当您将鼠标悬停在封面图像上时会展开。我希望封面图片有一个材质设计精简版徽章，上面写着该图库中的图像数量。我的问题是我无法找到徽章出现在图像上的方法。出于某种原因，它只是不起作用。我目前的解决方法是：
HTML：<main class="mdl-layout__content">
<br>
<br>
<div id="gall1" class="material-icons mdl-badge mdl-badge--overlap" data-badge="2"></div>
</main>
CSS：#gall1{
background-image: url('20152016.png') center / cover;
}
但它仍然无效。有没有人有任何想法，解决方案或想法，为什么这不起作用？
感谢。