CSS3創建background-image =無效的屬性值

我想創建一個對角線條紋背景圖案與CSS3漸變，但我似乎無法得到它的工作。這是我正在使用的代碼：CSS3創建background-image =無效的屬性值

body { 
background-color: gray; 
background-image: repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); 
}

它只是顯示一個純色的灰色背景。當我檢查元素時，它顯示背景圖像是一個無效的屬性值。我在Mac上編碼，並在Firefox 13.0.1和Chrome v20上進行了測試。

有誰知道這個問題是什麼？

來源

2012-07-02 7ch5

好了，我沒有正確的答案，但這個工具是非常寶貴的，我：http://www.colorzilla.com/gradient -editor/ – uotonyh

我一直在玩漸變編輯器，但我不想創建漸變背景..我試圖創建一個背景圖案。 – 7ch5

您的瀏覽器可能不支持前綴不變的屬性。嘗試使用供應商前綴：

html, body { 
    min-height: 100% 
} 
body { 
    background-color: gray; 
    background-image: -webkit-repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); 
    background-image: -moz-repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); 
    background-image: -ms-repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); 
    background-image: -o-repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); 
    background-image: repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); 
}

小提琴：http://jsfiddle.net/fefhz/7/

來源

2012-07-02 23:36:20 Sampson

查看https://developer.mozilla.org/zh/CSS/repeating-linear-gradient#Browser_compatibility – Neil

令人費解的是，代碼應該看起來像這裏發現的東西：http://lea.verou.me/ css3patterns /＃對角線條紋。我也玩弄了前綴的屬性，並得到了與你的jsfiddle相同的結果。我正在閱讀文檔，並嘗試用'右下角'替換'0deg'，並調整參數以遵循文檔中的示例，但似乎不起作用。我會繼續玩，看看會發生什麼！ – 7ch5

@ 7ch5問題在於身體元素的高度。看到我上面的答案。 – Sampson

任何原因必須在CSS3中？爲什麼不使用小圖像並重復它？您是否可以簡單地使用發生器爲您節省很多頭痛：http://www.stripegenerator.com/

來源

2012-07-02 23:30:31

我希望一旦我更好地理解CSS3，我可以直接從樣式表中更改背景的外觀，而不是每次需要更改時從生成器創建新文件。如果我無法弄清楚，我肯定會使用發電機，所以謝謝！ – 7ch5

CSS3創建background-image =無效的屬性值

回答

相關問題