如何在html元素后面创建一个不以中心为中心的循环css背景？

我使用的是来自的自定义字体来显示图标，如下所示：

图标只能是一种颜色加上透明度，在这种情况下，您可以看到上面的绿色

在某些情况下，我希望将这些图标的“细节”显示为白色-我希望通过在图标的适当部分后面放置白色背景来实现这一点。预期的最终结果：

我尝试添加背景色并使用

50%边界半径

，但得到的结果如下：

hoplu { 
    position:relative; 
}
hoplu:before { 
    position:relative; 
    z-index:2; 
}
hoplu:after { 
    content:""; 
    position:absolute; 
    z-index:1; 
    border-radius:50%; 
    background:white; 
    left:0; 
    top:0; 
    width:75px; 
    height:75px;
}

这（在我的图标元素上使用display:inlineblock实现）：

我觉得我有困难，因为图标元素本身是长方形的，用我对CSS的了解，将图标后面的圆形背景居中似乎是不可能的

我在这里展示了一个图标的演示（很抱歉，它不在“css提琴式”网站上，但我很难将其设置为符合我的情况）：

---

有什么建议吗？我觉得可能有一个css属性使这项工作变得更容易，但我不知道。我想做的是这样的：

hoplu { 
    position:relative; 
}
hoplu:before { 
    position:relative; 
    z-index:2; 
}
hoplu:after { 
    content:""; 
    position:absolute; 
    z-index:1; 
    border-radius:50%; 
    background:white; 
    left:0; 
    top:0; 
    width:75px; 
    height:75px;
}

通过这种方式，您将使用：after伪元素生成白色背景，并且由于它的z索引低于：before元素（包含图标），因此它将显示在图标后面。如果需要，请更改：after元素的顶部、左侧、宽度或高度