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

Here is a CSS3 solution on jsFiddle

随着时间的推移，这将比沉重的背景图像更好：创建它们，维护它们，服务它们，下载它们，缓存它们。使用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%);

答：目前，它需要供应商前缀，以便它可以跨浏览器呈现。

B中。写得难吗？不，这是微不足道的！这也是CSS3的新方式。查找“CSS3生成器#what you need＃”在这种情况下，它是一个径向渐变。但你可以对盒阴影，文本阴影，变换，动画等做同样的事情。

Here is one example of about a hundred diverse CSS3 generators.

Here is another jsfiddle involving opacity，它越来越接近示例图像。

如何在这里添加径向渐变？

2 个答案: