使用CSS3渐变创建大块的效果

Question

使用CSS3渐变创建大块的效果

csscanvasbackgroundgradientradial

3

有没有办法使用CSS3径向渐变实现良好性能的大块？像这个网站一样。 http://www.medora.ca/wp-content/themes/medora/images/bgNoise4.jpg（3200x1600）

Canvas-在图像生成期间阻止JS并创建超时。

CSS3-FF 13太过于负载，无法处理大渐变（3200x1600），即使为a标记添加简单的CSS3过渡也非常缓慢。

SVG-经验不足，没有进行过太多测试，图像质量比CSS3低。

VML-针对IE，没有经验

我提到了Chrome添加这样的具有径向CSS3渐变的大块，性能良好。

您是否知道任何用于CSS3或画布的技术，以制作没有可见径向线的径向渐变？

如果您可以提供一些示例链接，我将不胜感激。

谢谢！

- Rantiev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lodder · Answer 1

这是我想出来的。虽然还没有在大块上尝试过，但在这个例子中，我看不到明显的径向线：

HTML：

<div id="gradient_div"></div>

CSS：

#gradient_div {
  margin: 0 auto;
  border-radius: 20px;
  width: 500px;
  height: 500px;    
  background-color:rgba(171, 171, 171, 0.1);
  background-image: -moz-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -webkit-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -o-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -ms-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
}

这里有一个 JSFiddle 版本，您可以随意尝试：http://jsfiddle.net/Hz8ME/