开发者

Radial Gradient, Occupying the whole body?

开发者 https://www.devze.com 2023-01-19 22:27 出处:网络
How would you make a radial gradient occupy the entire body? At the moment i can make the gradient just fine, but the problem is that the gradient only occupies roughly 100px by 100px. The body backg

How would you make a radial gradient occupy the entire body?

At the moment i can make the gradient just fine, but the problem is that the gradient only occupies roughly 100px by 100px. The body background is set to 100%, but still no luck.

Any ideas? Below, is the CSS i'm using at the moment.

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, #568b9开发者_高级运维3 99%, rgba(0, 0, 0, 0) 100%);
}

Edit1: It seems Firefox is working just fine with the above code, and rather it is Webkit who is having the actual problems. Any help would be much appreciated!

Edit2: According to this link: http://webkit.org/blog/175/introducing-css-gradients/ My use of webkit's "point" is screwed up.. specifically, the radius after each point. The problem is though, that this seems to be an integer only value, as percentages do not seem to work.. Eg, i am trying to make the radius 100%, but only pixel values seem to apply.. any ideas?


For the Mozilla-ish syntax, try this:

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

I don't know what the Webkit equivalent is. If 'cover' doesn't work, try 'farthest-corner'.

0

精彩评论

暂无评论...
验证码 换一张
取 消