CSS3パターンの使い方

Question

これらのパターンはどのように使用できますか？
http://lea.verou.me/css3patterns/#japanese-cube

これは失敗した試行です。 http://jsfiddle.net/ujmWH/

あまりにも同じ結果です。

おかげ

Answer 1

そのCSS3プロパティはまだ標準ではありませんので、あなたは、特定のベンダープレフィックスを追加する必要があります。あなたは理由を知るためにその話題をGoogleにすることができます。 （Firefoxで）

は linear-grandient機能に -moz-を追加し、あなたが持っている：あなたは（オペラ）と -o-（ChromeとSafariのため）も -webkit-を追加する必要があり

http://jsfiddle.net/ujmWH/1/

。

ので、完全なCSSは次のようになります。

body { 
    background-color:#556; 
    background-image: 
     -moz-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -moz-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -moz-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -moz-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -moz-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
     -moz-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); 
    background-image: 
     -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
     -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); 
    background-image: 
     -o-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -o-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -o-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -o-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     -o-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
     -o-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); 
    background-image: 
     linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
     linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
     linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); 
    background-size: 80px 140px; 
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; 
} 

Answer 2

あなたはロレンツォ・sが指摘したように、すべてのプレフィックスを追加するか、または-prefixフリーを使用するかがあります。http://leaverou.github.com/prefixfree/（ただし、最初の制限を読みます）