CSS3渐变背景设置在身体不伸展，而是重复？ [英] CSS3 gradient background set on body doesn't stretch but instead repeats?
问题描述
ok表示< body> 中的内容总高为300像素。
我的< body> 使用 -webkit-gradient 或 -moz-
然后我最大化我的窗口（或只是使它高于300px），渐变将是300px高（内容的高度）
我假设这不是一个错误，因为它在webkit和gecko中都是一样的。
$ b
$ b
但是有一种方法可以使渐变填充窗口而不是重复？
应用以下CSS：
html {
height：100％;
}
body {
height：100％;
margin：0;
background-repeat：no-repeat;
background-attachment：fixed;
}
修改：添加 margin：0; 每个评论的主体声明（ Martin ）。
修改：对每个评论添加了 background-attachment：fixed; //stackoverflow.com/users/268125/\"> Johe Green ）。
ok say the content inside the <body> totals 300px high.
If I set the background of my <body> using -webkit-gradient or -moz-linear-gradient
Then I maximize my window (or just make it taller than 300px) the gradient will be exactly 300px tall (the height of the content) and just repeat to fill the rest of the window.
I am assuming this is not a bug since it is the same in both webkit and gecko.
But is there a way to make the gradient stretch to fill the window instead of repeat?
Apply the following CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
Edit: Added margin: 0; to body declaration per comments (Martin).
Edit: Added background-attachment: fixed; to body declaration per comments (Johe Green).
这篇关于CSS3渐变背景设置在身体不伸展，而是重复？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
