我想替換以下Mozilla的特定CSS規則:線性漸變相當於MOZ線性梯度
background: -moz-linear-gradient(center top , #F5F5F5, #E4E4E4);
與使用標準linear-gradient
代替同等規則。換句話說,我怎麼能完成以下規則,以便它具有相同的效果(在Firefox)如上
background: linear-gradient /* what goes here? */
我想替換以下Mozilla的特定CSS規則:線性漸變相當於MOZ線性梯度
background: -moz-linear-gradient(center top , #F5F5F5, #E4E4E4);
與使用標準linear-gradient
代替同等規則。換句話說,我怎麼能完成以下規則,以便它具有相同的效果(在Firefox)如上
background: linear-gradient /* what goes here? */
規則這是我如何處理所有梯度對於所有瀏覽器,我希望這可以幫助;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000',GradientType=0); /* IE6-9 */
如果您遇到一些困難或者只是爲了加快流程,您還可以使用一些梯度生成器。
實例:
http://www.colorzilla.com/gradient-editor/
http://westciv.com/tools/gradients/
http://gradients.glrzad.com/
center
不是線性梯度說明書的一部分。 (我不知道爲什麼它被忽略,而不是CSS錯誤。)Firefox支持的最新語法是-moz-linear-gradient(to bottom, #F5F5F5, #E4E4E4);
但是據我所知,規範還沒有達到CR狀態,所以這仍然可以改變。
你的谷歌破了嗎?不要試圖成爲一個聰明的,但如果你谷歌「班輪梯」你會得到大約500萬的結果。 – Dutchie432 2012-04-25 20:17:19
@ Dutchie432如果*您的* Google已經找到了這個特定問題的答案,請發佈網址。 – 2012-04-25 20:57:37
好吧,我在Google中輸入了「Linear-Gradient」。第一個結果是鏈接到'linear-gradient'的文檔 - 在'Syntax'標題下。第二個結果是一個梯度發生器,它將爲所有瀏覽器編寫代碼(就像Ron發佈的那樣)。截至今天,Google返回了「約10,500,000個結果」。 http://tinyurl.com/7yrvskk - 再次,不要成爲一個聰明的人。在做一個膚淺的Google之前,我發表一個問題似乎很愚蠢。 – Dutchie432 2012-04-26 12:35:21