调整背景颜色大小而不使用图像
[英]Resizing Background Colour without using an image
问题描述
I'm trying to make a flag by only using font-awesome and a background colour. 
我只想使用font-awesome和背景颜色来制作旗帜。 However, I can only get it to work by using a url to a background image, which allows me to change its size. 但是，我只能通过使用背景图像的URL来使其工作，这允许我更改其大小。 position and repeat. 位置和重复。 If I use a background colour, I am not able to do so. 如果我使用背景颜色，我无法这样做。
To reiterate, I only want my background colour to appear in a certain location, and I do not want to load resources from a url and instead work with background colour. 重申一下，我只希望我的背景颜色出现在某个位置，我不想从网址加载资源，而是使用背景颜色。
HTML 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 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 个解决方案
解决方案1
4 已采纳 2018-08-17 23:20:46
Simply use a linear-gradient : 只需使用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>
Using the same color inside the gradient will result on one color gradient and gradient behave like image so you can easily adjust their size and position like you do with images: 在渐变内使用相同的颜色将产生一个颜色渐变 ，渐变的行为类似于图像，因此您可以像处理图像一样轻松调整其大小和位置：
.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>
You can also use a radial-gradient in case you want to have circular shape (which is also suitable in your actual example): 如果您想要圆形（也适用于您的实际示例），您还可以使用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>
And here is with your code: 以下是您的代码：
#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>
解决方案2
-1 2018-08-17 23:30:12
simply replace your css code from 只需替换你的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%;
to 至
height: 100px;
width: 100px;
background-color: red;
display:block;
Note : Display style block is mandatory, because you are using "i TAG (an inline element)" . 注意：显示样式块是必需的，因为您使用的是“i TAG（内联元素）”。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.