真棒字体：如何使超出形状限制的背景颜色透明？

Question

假设我有一个字体超赞的图标：

<i class="fa fa-times-circle pull-right fa-2x" style="background-color: white; color: red;" aria-hidden="true"></i><

身体背景设为黑色

body {  
  background-color: black;
}

我希望将形状定界的背景是透明的（例如，主体背景为黑色，而圆圈内的内部背景仍然为白色），实际上可行吗？

http://jsfiddle.net/8u39n0sq/

基本上如何避免形状中心为背景色为白色的大白色丑方的方形东西？

Answer 1

您可以radial-gradient(white 50%, transparent 50%)根据需要使用和调整它。希望这可以帮助 ：）

小提琴：http : //jsfiddle.net/8u39n0sq/2/

body{
background:black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<i class="fa fa-times-circle pull-right fa-2x" style="background: radial-gradient(white 50%, transparent 50%); color: red;" aria-hidden="true"></i>