Question

我在为学校项目制作的网站上遇到了一些麻烦。我有一个渐变背景，但它会垂直重复，当你缩小时尤其明显。这是一张照片： repeating background

这里是css的代码（我猜这是问题所在的地方）：

＆＃13;

html {
	background: #45aa99; /* Old browsers */
	background: -moz-linear-gradient(top,  #10aaff 0%, #2288aa 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,10aaff), color-
                                         stop(100%,#2288aa)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #10aaff 0%,#2288aa 100%);  
                  /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #10aaff 0%,#2288aa 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #10aaff 0%,#2288aa 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #10aaff 0%,#2288aa 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#10aaff', 
                 endColorstr='#2288aa',GradientType=0 ); /* IE6-9 */
	}

＆＃13;

无论缩放如何，我都希望网页能够在网站的整个长度上进行渐变。知道怎么做吗？谢谢！

Answer 1

您正在寻找background-repeat: no-repeat;

您还可以按如下方式指定背景的宽度和高度：

background-size:100px 100px; /* width & height */

以下是LINK有关它的更多描述性信息。

Answer 2

将html设置为height：100％;您可以在后台css中丢失0％ - 100％。

所以（为简单起见，没有alt-browser选项的简化）：

html, body {
  height:100%;
  background: linear-gradient(to bottom,#10aaff,#2288aa); /* W3C */
}

Answer 3

使用渐变来拉伸页面的整个高度：

html {
    min-height: 100%
}

另外，在x轴或y轴上都没有重复颜色;那是;水平或垂直;使用;

body {
    background-repeat: no-repeat;
}

渐变背景重复

3 个答案: