CSS3 create background-image =属性值无效

Question

我正在尝试创建一个带有CSS3渐变的对角条纹背景图案，但是我似乎不能让它工作。这是我使用的代码：

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

它只显示一个纯色的灰色背景。当我检查元素时，它显示background-image是一个无效的属性值。我在苹果电脑上编程，并在Firefox13.0.1和Chrome v20上进行了测试。

有人知道问题出在哪里吗？

Answer 1

您的浏览器可能不支持无前缀属性。尝试使用供应商前缀：

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/

Answer 2

有什么理由一定要用CSS3吗？为什么不使用一个小图像并重复它呢？你能用一个生成器省去很多麻烦吗：http://www.stripegenerator.com/