1

我正在尝试使用 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 上进行了测试。

有谁知道问题是什么？

4

2 回答 2

5

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

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-02T23:36:20.900 回答
-1

有什么理由必须在 CSS3 中？为什么不使用小图像并重复它？只需使用生成器，您就可以省去很多麻烦吗：http: //www.stripegenerator.com/

于 2012-07-02T23:30:31.793 回答