Question

出于某种原因，我的CSS Gradient无法在Firefox（v10.0.1）中运行。该页面的主要背景应该是从顶部的白色到蓝色的渐变，但在Firefox而不是平滑的渐变中，我只是得到两个实心的颜色块，一个是白色，一个是蓝色。在Chrome和Safari（在iPad和iPhone上），它可以很好地工作。

以下是该页面的测试网址：

http://testing.xenongroupadmin.com/bitesize/login.html

这是我的CSS代码：

body  { font-family: arial, tahoma, verdana, sans-serif;
    background: linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
    background: -o-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
    background: -moz-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
    background: -webkit-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
    background: -ms-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
    background: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0.42, #FFFFFF),
                    color-stop(0.06, #CDEDFA));


    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    width: 100%;
    min-width:1350px;
        }

我试过寻找答案，但似乎无法找到符合我目前困境的例子。

谢谢大家

Answer 1

试试这个......它的跨浏览器甚至适用于ie6

.bodyGradient {
    position: absolute; 
    top: 0; 
    left: 0; 
    border-top: 3px solid #93ae59; 
    z-index: -1;
    background: -moz-linear-gradient(top,  #cfddac,  #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#cfddac), to(#fff));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfddac', endColorstr='#ffffff');
    background: -o-linear-gradient(rgb(207,221,172),rgb(255,255,255));
}

Answer 2

使用“background-image”代替“background”，例如来自http://gradients.glrzad.com/的示例 background-image：-moz-linear-gradient（底部，＃DBA803 13％，＃FFCA1D 57％，＃FFF338 79％）;

Answer 3

在css

中写下此内容

background-image: -moz-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);

为所有浏览器定义gradient的更好方法

body  { 
    background: linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
    background: -moz-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
    background: -webkit-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
        }

CSS3 Gradient无法在Firefox中运行

3 个答案: