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是无效的属性值。我在mac上编码，并在Firefox 13.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/

CSS3创建background-image =无效的属性值

2 个答案: