css - Font Awesome : How to make the background-color out of the shape delimitation transparent?

Question

假设我有这个字体很棒的图标:

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

body 背景设置为黑色

body {  
  background-color: black;
}

我希望界定形状的背景是透明的(比如 body 背景是黑色的，而圆圈内的内部背景是白色的)，这真的可能吗？

http://jsfiddle.net/8u39n0sq/

基本上如何避免在形状中心的背景色为白色时出现这个又大又丑的白色正方形？

Answer 1

您可以使用 radial-gradient(white 50%, transparent 50%) 并根据需要调整它。希望，这会有所帮助:)

fiddle :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>