如何创建一个以黑色为主并带有一些渐变阴影圆圈的网页背景？

Question

很抱歉问这个问题，但我真的不知道该怎么做。我不熟悉 photoshop，甚至不知道这是否是最好的解决方案。

这是我想要创建的背景类型的示例：

http://sci.ph/

我知道如何完成所有 HTML 但想知道是否有任何技术可以用来在页面上创建背景阴影渐变圆圈，或者我应该雇人来做这个用photoshop。

如果有帮助，我正在寻找现代 IE10 及更高版本的解决方案。

Answer 1

您可以完全使用 css 制作圆形渐变。对于渐变，我总是使用 colorzilla gradient generator。这是一个例子：

jsfiddle demo

html

<div id="bg"></div>

css

html, body {
            height: 100%;
            margin: 0;
        }

#bg{
min-height: 100%; 

background: -moz-radial-gradient(center, ellipse cover,  #c4d82b 0%, #131313 37%, #131313 68%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c4d82b), color-stop(37%,#131313), color-stop(68%,#131313)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #c4d82b 0%,#131313 37%,#131313 68%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #c4d82b 0%,#131313 37%,#131313 68%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #c4d82b 0%,#131313 37%,#131313 68%); /* IE10+ */
background: radial-gradient(ellipse at center,  #c4d82b 0%,#131313 37%,#131313 68%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4d82b', endColorstr='#131313',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

然而，您展示的示例很难使用 css 实现，尤其是当您希望在不同的浏览器和设备上获得一致的效果时。图片可能是最好的解决方案。

如何创建一个以黑色为主并带有一些渐变阴影圆圈的网页背景？

How can I create a web page background that's mainly black with some gradient shaded circles?

html

css

svg

canvas

radial-gradients