css - 这里如何添加径向渐变？

Question

http://www.templatemonster.com/demo/39055.html

我在网上冲浪时看到过许多网站在其背景上具有自然渐变。我不明白的是……他们是怎么做到的？我不认为这是一个 Photoshop 创建的图像文件，因为渐变看起来像是根据我的网络浏览器的屏幕大小自然而正确地重新调整大小......所以，我认为它一定是 CSS ......但我找不到哪个代码实际上在做这项工作：/

有人可以告诉我它是如何完成的吗？

Answer 1

这是一个简单的背景图像。

style.css，第 6 行：

body {background:#fff url(../images/body-bg.jpg) 50% 50%; ...

Answer 2

这是 jsFiddle 上的 CSS3 解决方案。

随着时间的推移，这将比沉重的背景图像更可取：创建它们、维护它们、服务它们、下载它们、缓存它们。使用 CSS3，这些步骤不再是必需的。

相反，只需使用 CSS3 径向渐变，并使用生成器查找您需要的内容。这是代码：

/* IE10 Consumer Preview */ 
background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Opera */ 
background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #00A3EF 100%);

​ A. 目前，它需要供应商前缀，以便它可以跨浏览器渲染。

B. 很难写吗？不，这是微不足道的！这也是CSS3的新方式。查找“CSS3 Generator #what you need#”在这种情况下，它是一个径向渐变。但是您可以对 box-shadow、text-shadow、transform、animation 等执行相同的操作。

这是大约一百种不同的 CSS3 生成器的一个示例。

这是另一个涉及 opacity 的 jsfiddle，它越来越接近示例图像。