CSS3渐变不能在Firefox

工作出于某种原因，我的CSS梯度不能在Firefox（v10.0.1）工作。页面的主要背景应该是从白色的渐变，在自上而下的青色颜色，但不是平滑渐变我刚开始两色固体块，一个白，一个蓝Firefox浏览器。在Chrome和Safari（iPad & iPhone）上，它可以很好地工作。CSS3渐变不能在Firefox

这里是页面的测试网址：

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; 
     }

我试图寻找一个答案，但似乎无法找到一个符合我当前困境的例子。

谢谢大家

来源

2012-02-15 Chris

试试这个...它的跨浏览器，即使在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)); 
}

来源

2012-02-15 10:19:58

这似乎已经奏效，我爱的是它在IE工程，以及 - 我在IE中使用渐变写下来的东西！但有一个问题 - 怎样才能进一步转移梯度向下的页面，使存在的页面和蓝色开始上更白淡入向底部？ – Chris 2012-02-15 10:34:41

我不知道该确切的解决方案，但你可以把另一个DIV在它与固色，并在其下梯度格.. – 2012-02-15 10:39:52

如果它的工作适合你。所以你不会头脑将其标记为正确答案 – 2012-02-15 10:40:16

使用“背景图片”，而不是“背景”，这样的例子从http://gradients.glrzad.com/ 背景图片：-moz线性梯度（底部，＃DBA803 13％，＃FFCA1D 57％，＃FFF338 79％）;

来源

2012-02-15 10:25:50 abimelex

写在你的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%); 
     }

来源

2012-02-15 10:36:37 sandeep

CSS3渐变不能在Firefox

回答

相关问题