logo标签列表

不使用图片调整背景颜色大小

htmlcssfont-awesome
6

我正在尝试使用font-awesome和背景颜色制作标志。然而，我只能通过使用背景图片的url来让它工作，这样我就可以改变它的大小、位置和重复。如果我使用背景颜色，我就不能这样做。

再强调一遍，我只想让我的背景颜色出现在特定的位置，并且我不想从URL加载资源，而是要用背景颜色进行操作。

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%;
}
2个回答
4

只需要使用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>

-1

只需将您的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;

注意：必须使用display属性为block，因为您正在使用"i标签（内联元素）"。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接