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

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 实现，特别是如果您希望在不同的浏览器和设备上获得一致的效果。图片可能是最好的解决方案。