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

回答

相關問題