Linear gradients not working in Firefox 4

2023-02-21 23:10 问答作者：

I recently tried applying a gradient background to a webpage using only CSS3. while testing out the following code:

body {background: -moz-linear-gradient(top, blue, white);}

The result was:

Not exactly what I was looking开发者_JAVA技巧 for... Any idea what is going on? OS is Win7 64bit and Firefox 4. Thanks!

you may want to add no-repeat to that background property…

or set a height to the <body> (and the <html>) like so:

html { height: 100%; }
body { background: -moz-linear-gradient(top, blue, white); height: 100%; }

This is happening because the height of the body is small, and by default the background is repeating.

You can either make it not repeat:

body { background-repeat: no-repeat; }

or make the height of the container (html) the size of the window:

html { height: 100%; }

though note that the latter can sometimes have unexpected effects when scrolling.

精彩评论