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非常困难，尤其是如果您希望在不同的浏览器和设备上实现一致的效果。图像可能是最好的解决方案。

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

1 个答案: