Question

在那里，我使用以下代码在firefox中创建渐变背景...但问题是渐变填充页面好但是重复...

<body style="background-image:linear-gradient(#eee,#ddd); background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);">

及以下是上述代码的结果

the result of the above code

我希望渐变能够拉伸并填充整个页面......我怎么能这样做......任何帮助都会被提前感谢... :)

Answer 1

将此信息放入cbr文件中以获取交叉浏览器渐变：

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

Gradient generator

Answer 2

最简单的方法是简单地将背景添加到HTML元素并将其高度设置为100％：

html {
    /* and dont forget the prefixes ;) */
    background: linear-gradient(to bottom,  #2f2727 0%,#1a82f7 100%) no-repeat;
    height: 100%; 
}

http://jsfiddle.net/Caja9/

Answer 3

我尝试了下面的代码并且有效

background-image:-moz-linear-gradient(#eee,#ddd); height:100%;

firefox - 用渐变填充背景

3 个答案: