我看到了很多关于这方面的相关问题和例子，但我并不高兴。
我创建了一个片段：
#bar-segment {
border-radius: 15px;
height: 2px;
width: 20px;
background-image: linear-gradient(to right, $brand-color-blue , $brand-color-green);
}
我正在用它来构建一个仪表(单条形图之类的东西(。所以我基本上想把这些段(repeat-y(叠加起来，以反映仪表读数。所以我找到了这个：background-image: element()，尝试了很多事情，但都没能在屏幕上显示一张图像，更不用说用它做任何事情了。非常令人沮丧。最终，我想我不知道如何使用它。有人能告诉我这个词的正确用法吗？也许可以帮我垂直重复一下吗？
我发现的最接近的是这个，但不知怎么的，我甚至无法重复。jsfiddle
这里有一个图片链接，让你了解我正在努力实现的目标：声音均衡器条形图
我为你做了一些，希望它能帮助
<!DOCTYPE html>
<html>
<head>
<title>Bars </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
*{
border: 0;
margin: 0;
}
body{
background-color: #000 ;
background-image: url(https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3);
background-repeat: no-repeat;
background-position: center;
}
.box-main {
margin: 15px auto;
background: linear-gradient(to bottom, #000 0%, #17191d 100%);
border: solid 2px #3e434c;
height: 600px;
width: 390px;
border-radius: 40px;
padding: 15px;
}
/*change #id to .class, we use it a lot of times*/
.dotted_line {
width: 100%;
height: 10px;
float: left;
margin: 10px auto;
background-image: url('https://i.stack.imgur.com/ygAUp.png');
background-repeat: repeat-x;
background-size: 10px 10px;
/* background-color: black; */
border-radius: 5px;
margin: 18 auto;
/* box-shadow: inset -2px -2px 2px 0px rgb(66, 70, 74), inset 1px 1px 1px -1px rgb(0, 0, 0); */
padding: 7px 4px;
background-position: center;
animation:bar 3s -1s linear infinite alternate running;
}
}
@-webkit-keyframes bar {
0% {width: 0%; }
25% {width: 20%; }
50% {width: 60%; }
75% {width: 70%;}
100% {width: 100%;}
}
@keyframes bar {
0% {width: 0%; }
25% {width: 20%; }
50% {width: 60%; }
75% {width: 70%;}
100% {width: 100%;}
}
.bar-0{ left:7px; -webkit-animation-duration: 1s; animation-duration: 2s;}
.bar-1{ left:16px; -webkit-animation-duration: 321ms; animation-duration: 321ms;}
.bar-2{ left:25px; -webkit-animation-duration: 353ms; animation-duration: 353ms;}
.bar-3{ left:34px; -webkit-animation-duration: 341ms; animation-duration: 341ms;}
.bar-4{ left:42px; -webkit-animation-duration: 327ms; animation-duration: 327ms;}
h1 {
color: #ccc;
font-size: 15px;
text-align: center;
margin-bottom: 112px;
}
</style>
</head>
<body>
<div class="box-main">
<h1>The best music Peak Level</h1>
<div id="doted1" class="dotted_line bar-3"></div>
<div id="doted2" class="dotted_line bar-4"></div>
<div id="doted3" class="dotted_line bar-1"></div>
<div id="doted4" class="dotted_line bar-3"></div>
<div id="doted5" class="dotted_line bar-0"></div>
<div id="doted6" class="dotted_line bar-4"></div>
<div id="doted7" class="dotted_line bar-2"></div>
<div id="doted8" class="dotted_line bar-0"></div>
<div id="doted9" class="dotted_line bar-1"></div>
</div>
</body>
</html>
我从另一个问题中获得了灵感并得到了这个完美的工作：(
<div id="bar-segment" *ngFor="let i of Arr(num).fill(1)"></div>