Question

你如何使径向渐变占据整个身体？

目前我可以使渐变很好，但问题是渐变仅占用大约100px×100px。身体背景设定为100％，但仍然没有运气。

有什么想法吗？下面是我正在使用的CSS。

body {
  background-color: #2b616d;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(99%, #568b93), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -moz-radial-gradient(center center, circle, #568b93 99%, rgba(0, 0, 0, 0) 100%);
  background-image: radial-gradient(center center, circle, #568b93 99%, rgba(0, 0, 0, 0) 100%);
}

EDIT1： 似乎Firefox使用上面的代码工作得很好，而且Webkit正在遇到实际问题。任何帮助将不胜感激！

EDIT2： 根据此链接：http://webkit.org/blog/175/introducing-css-gradients/ 我对webkit的“点”的使用被搞砸了......具体来说，每个点后的半径。问题是，这似乎只是一个整数值，因为百分比似乎不起作用。例如，我试图使半径100％，但只有像素值似乎适用..任何想法？

Answer 1

对于Mozilla-ish语法，请尝试以下方法：

[-moz-]radial-gradient(center center, circle cover, #568b93 99%, rgba(0, 0, 0, 0) 100%)
                                             ^^^^^

我不知道Webkit的等价物是什么。如果'cover'不起作用，请尝试'farthest-corner'。

径向渐变，占据整个身体？

1 个答案: