Resizing Background Colour without using an image
Question
I'm trying to make a flag by only using font-awesome and a background colour. However, I can only get it to work by using a url to a background image, which allows me to change its size. 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
<!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 answers
solution1
4 ACCPTED 2018-08-17 23:20:46
Simply use a 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):
.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>
solution2
-1 2018-08-17 23:30:12
simply replace your css code from
/*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)" .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.