HTML

<!DOCTYPE html>

<html>
<head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
        <link rel="stylesheet" href="test.css" type="text/css">

</head>
<body>
    <i class="fas fa-money-bill-wave-alt" id="flag"></i>
</body>
</html>

CSS

#flag{

    /*Icon colour is changed to default green*/
    color : green;

    /*The colour red is taken from folder*/
    background : url("red.jpg");


    background-size: 30% 40%;
    background-position: center;
    background-repeat : no-repeat;
    border-radius : 100%;
}

Answer 1

只需使用linear-gradient：

#flag {
  /*Icon colour is changed to default green*/
  color: green;
  background-image: linear-gradient(red,red);
  background-size: 30% 40%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 100%;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

<i class="fas fa-money-bill-wave-alt fa-5x" id="flag"></i>

在渐变内使用相同的颜色将导致一种颜色渐变，并且渐变的行为类似于图像，因此您可以像调整图像一样轻松地调整其大小和位置：

.box {
  border:1px solid;
  width:200px;
  height:100px;
  background-image:linear-gradient(red,red);
  background-size: 50px 50px;
  background-position:20% 50%;
  background-repeat:no-repeat;
}

<div class="box">

</div>

如果您想要具有圆形形状（也适用于您的实际示例），也可以使用radial-gradient：

.box {
  border:1px solid;
  width:200px;
  height:100px;
  background-image:radial-gradient(circle at center, red 60%,transparent 61%);
  background-size: 50px 50px;
  background-position:20% 50%;
  background-repeat:no-repeat;
}

<div class="box">

</div>

这是您的代码：

#flag {
  /*Icon colour is changed to default green*/
  color: green;
  background-image: radial-gradient(circle at center, red 60%,transparent 61%);
  background-size: 50% 50%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 100%;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

<i class="fas fa-money-bill-wave-alt fa-5x" id="flag"></i>

Answer 2

只需替换您的CSS代码来自

/*Icon colour is changed to default green*/
color : green;
/*The colour red is taken from folder*/
background : url("red.jpg");
background-size: 30% 40%;
background-position: center;
background-repeat : no-repeat;
border-radius : 100%;

到

height: 100px;
width: 100px;
background-color: red;
display:block;

注意：显示样式块是必需的，因为您使用的是“ i TAG（嵌入式元素）”。

在不使用图像的情况下调整背景色的大小

HTML

CSS

2 个答案: