html - 如何在 html 元素后面创建未居中的圆形 css 背景？

Question

我正在使用Fontastic的自定义字体来显示您在此处看到的图标：

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

在某些情况下，我希望将这些图标的“详细信息”显示为白色——我想要实现这一点的方法是在图标的适当部分后面放置一个白色背景。期望的最终结果：

我尝试添加背景颜色并使用50% border-radius，但我得到这样的结果：

和这个（在我的图标元素上使用 display: inline-block 关闭）：

我觉得我遇到了困难，因为图标元素本身是矩形的，并且使用我对 CSS 的知识似乎不可能将图标后面的圆形背景居中。

我在这里放了一个图标的演示（对不起，它不是在一个'css fiddle-like'网站，但我很难设置它来匹配我的情况）：https ://hoplu.com/troubleshooting

有小费吗？我觉得可能有一个我不知道的 css 属性使这项工作变得更加容易，但一直无法确定一个。

Answer 1

我会做的是这样的：

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-index 比 :before 元素（包含图标）低，因此它将显示在图标后面。如果需要，更改 :after 元素的顶部、左侧、宽度或高度。