html – 在CSS中创建星空背景

概述我正在使用纯代码制作太阳能系统网站,不使用任何图像.问题是我无法弄清楚如何在后台获得星星.我试图在黑色背景上得到类似黄色展开的波尔卡圆点图案.这是我的代码(为每个其他星球重复div和样式). html,body { width: 100%; height: 100%; background-color: black;}#sun { position: absolute; 我正在使用纯代码制作太阳能系统网站,不使用任何图像.问题是我无法弄清楚如何在后台获得星星.我试图在黑色背景上得到类似黄色展开的波尔卡圆点图案.这是我的代码(为每个其他星球重复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);  }}

<div ID="sun"></div><div ID="mercury-orbit">  <div ID="mercury"></div></div>

解决方法 从 this开始,星光灿烂的夜晚.

background-color:black;background-image:radial-gradIEnt(white,rgba(255,255,.2) 2px,transparent 40px),radial-gradIEnt(white,.15) 1px,transparent 30px),.1) 2px,radial-gradIEnt(rgba(255,.4),transparent 30px);background-size: 550px 550px,350px 350px,250px 250px,150px 150px; background-position: 0 0,40px 60px,130px 270px,70px 100px;

总结

以上是内存溢出为你收集整理的html – 在CSS中创建星空背景全部内容，希望文章能够帮你解决html – 在CSS中创建星空背景所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。