怎么用html做出星空页面,html – 在CSS中创建星空背景

我正在使用纯代码制作太阳能系统网站,不使用任何图像.问题是我无法弄清楚如何在后台获得星星.我试图在黑色背景上得到类似黄色展开的波尔卡圆点图案.这是我的代码(为每个其他星球重复div和样式).

html,

body {

width: 100%;

height: 100%;

background-color: black;

}

#sun {

position: absolute;

top: 50%;

left: 50%;

height: 200px;

width: 200px;

margin-top: -100px;

margin-left: -100px;

border-color: orange;

border-width: 2px;

border-style: solid;

border-radius: 50%;

box-shadow: 0 0 64px yellow;

background-color: yellow;

}

#mercury {

position: absolute;

top: 0;

left: 50%;

height: 10px;

width: 10px;

margin-left: -5px;

margin-top: -5px;

border-radius: 50%;

background-color: #ffd9b3;

}

#mercury-orbit {

position: absolute;

top: 50%;

left: 50%;

width: 260px;

height: 260px;

margin-top: -130px;

margin-left: -130px;

border-width: 2px;

border-style: dotted;

border-color: white;

border-radius: 50%;

-webkit-animation: spin-right 22s linear infinite;

-moz-animation: spin-right 22s linear infinite;

-ms-animation: spin-right 22s linear infinite;

-o-animation: spin-right 22s linear infinite;

animation: spin-right 22s linear infinite;

}

@-webkit-keyframes spin-right {

100% {

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes spin-right {

100% {

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

}

}