html - 在不使用图像的情况下调整背景颜色
问题描述
我正在尝试仅使用令人敬畏的字体和背景颜色来制作标志。但是,我只能通过使用背景图像的 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%;
}
解决方案
只需使用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>
您也可以使用 aradial-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>