纯 CSS 静态星域 [关闭]答案

【问题标题】：Pure CSS static starfield [closed]纯 CSS 静态星域 [关闭]
【发布时间】：2014-08-31 00:14:56
【问题描述】：

我想知道如何在星星不移动的情况下仅使用 CSS 创建星域。我找到了一些动画星空的例子，但我不想要动画部分。请帮助我了解如何在不使用图像文件的情况下创建这种类型的静态背景。

【问题讨论】：

我想要一艘宇宙飞船！但严重的是，这个问题缺乏努力和理解。你的代码在哪里，你试过什么？
没有详细说明你想要达到的目标，没有明确的方向，你甚至没有尝试过提出正确的问题。
可能是因为您的问题很短，没有表现出任何努力，并且似乎故意打折可能是最好或唯一可能的常用解决方案......
可能是因为你的问题太宽泛了，你还没有发布你目前拥有的代码。 SO 不是“做我的功课”网站
说真的，只要用谷歌搜索 css starfield 看看你会得到什么......

标签： css

【解决方案1】：

作为“让我们看看如果……会发生什么”的练习，下面的代码是直接从here 窃取的，并稍微修改为静态的。结果是可以预见的：一个基本的、重复的星域。

<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。

【讨论】：