我想知道如何仅使用CSS创建星型字段，其中星型不移动。我已经找到了一些动画星形字段的例子，但我不想要动画部分。请帮助我了解如何在不使用图像文件的情况下创建这种类型的静态背景。
作为"让我们看看如果…会发生什么"中的一个练习，下面的代码直接从这里窃取并稍微修改为静态代码。结果是可以预测的:一个基本的、重复的星形场。
<html>
<head>
<title>Testing a starfield</title>
<style>
#space, .stars {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.stars {
background-image:
radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
background-repeat: repeat;
background-size: 200px 200px;
}
body {
background: #000;
}
</style>
</head>
<body>
<div id="space">
<div class="stars"></div>
<div class="stars"></div>
<div class="stars"></div>
<div class="stars"></div>
<div class="stars"></div>
</div>
</body>
</html>
显然，这个CSS的功能部分是由radial-gradient的结果组成background-image的碎片。