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>

Answer 2

这是一种解决方法，但您可以考虑添加:after伪元素，以便在图标后面添加白色背景：

body {
  background-color: black !important;
}

i {
  color: red;
  position: relative;
}

i:after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background: white;
  z-index: 0;
  border-radius: 100%;
}

i:before {
  z-index: 1;
  position: relative;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<i class="fa fa-times-circle pull-left fa-2x" ></i>

它基本上创建一个白色圆形元素，并使用z-index将其排列在图标后面。我在4px，top，right和bottom属性中使用了left，以确保白色背景不会超出图标的边界。

Answer 3

background-color:transparent将其放在span。

上

即。 <span class="fa-stack fa-lg icon-facebook" style="background-color:transparent">如果你愿意的话，你可以把它放在课堂上。

我提供了working fiddle here。

Answer 4

我最终使用了几个fa-stack和我想要使用的内部形状。

<span class="fa-stack fa-lg success">
 <i class="fa fa-circle fa-stack-2x"></i>
 <i class="fa fa-check fa-stack-1x"></i>
</span>

<span class="fa-stack fa-lg error">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-times fa-stack-1x"></i>
</span>

虽然它违背了划分背景的目的：http://jsfiddle.net/cLpybq20/

与我使用的字形不完全相同，但它符合我的需要并且显示出较少的调整。

Font Awesome：如何使形状定界的背景颜色透明？

4 个答案: