ColorZilla

在身体上设置的CSS3渐变背景不会拉伸,而是重复?

旧城冷巷雨未停 提交于 2020-02-26 09:08:33
好吧说 <body> 里面的内容总计300px高。 如果我使用 -webkit-gradient 或 -moz-linear-gradient 设置我的 <body> 的背景 然后我最大化我的窗口(或者只是让它高于300px)渐变将正好是300px高(内容的高度),并重复填充窗口的其余部分。 我假设这不是一个bug,因为它在webkit和gecko中是相同的。 但有没有办法让渐变拉伸填充窗口而不是重复? #1楼 设置 html { height: 100%} 会对IE造成严重破坏。 这是一个例子(png)。 但是你知道什么效果很好吗? 只需在 <html> 标签上设置背景即可。 html { -moz-linear-gradient(top, #fff, #000); /* etc. */ } 背景延伸到底部,并且不会发生奇怪的滚动行为。 您可以跳过所有其他修复程序。 这得到了广泛的支持。 我没有找到一个不允许你将背景应用于html标签的浏览器。 它是完全有效的CSS并且已经有一段时间了。 :) #2楼 此页面上有很多部分信息,但不完整。 这是我做的: 在这里创建一个渐变: http : //www.colorzilla.com/gradient-editor/ 在HTML而不是BODY上设置渐变。 使用“background-attachment:fixed;”修复HTML背景