css - 背景を斜めに繰り返す方法（1行に1回のみ）

Question

背景を縦や横ではなく斜め方向に繰り返したいのですが、その方法をご存知ですか？たとえば、左上から始まり、右下に斜めに繰り返されるチェーンが必要です.1つは便利な方法で他の背景をオーバーレイする（蝉の方法）複数の画像を使用した背景の繰り返しソリューションを考えていましたが、しませんでした成功しました。これに対する解決策を知っているなら、私に知らせてください。

Answer 1

:before背景画像を回転させて含むルールを作成し、それを変換します。

.foo:before {
    display: block;
    background: url("myimage") repeat-x;
    position: absolute;
    height: 100px;
    top: -50px;
    left: 0;
    width: 200%;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform-origin:  left center;
    -moz-transform-origin:  left center;
    -webkit-transform-origin:  left center;
    content: "";
    z-index: -1;
}

.foo {
    position: relative;
    overflow: hidden;
}

http://jsfiddle.net/r8BzE/

Answer 2

可能な最も簡単な方法（多くの時間を節約できます）は、斜めの背景を含む十分な大きさ（たとえば、500x500）のpng画像を作成することです。可能であれば、gifを作成してください。そうすれば、ファイルサイズは大きくなりません。

2番目の解決策は、複数のdivを生成することです。

たとえば、500x500divの背景として斜めに複製したい50x50png画像があるとします。

それぞれ50px（10％）の高さの10個の水平divを作成し、連続する各divに+50background-position-xを与えます。

#div1{
    background:transparent url(my_bg.png) 0px top repeat-y;
}
#div2{
    background:transparent url(my_bg.png) 50px top repeat-y;
}
#div3{
    background:transparent url(my_bg.png) 100px top repeat-y;
}

など。このcssは、phpまたは使用しているサーバー側の言語を使用して生成することもできます。

PHPコードの例：

<style type="text/css">
<?php
for ($i = 0; $i < 10; $i++){
    echo "#div$i{ background:transparent url(my_bg.png) ".(50*$i)."px top repeat-y; }";
}
?>
</style>

しかし、プレーンなcssでは、単一のdivで斜めの背景を実現することはできません。

Answer 3

このようなものを機能させることができるかもしれません：

http://jsfiddle.net/johnkpaul/8LmgF/

http://johnkpaul.tumblr.com/post/17057209155/wish-background-repeat-had-a-repeat-diagonal-option

コードは次のようになります。

.original-background{    
   background:url(http://img850.imageshack.us/img850/2400/rowofstars.gif) repeat;
}

.diagonal-background:before{
  content:"";
  background:url(http://img850.imageshack.us/img850/2400/rowofstars.gif) repeat;
  width:200%;
  height:200%;
  position:absolute;
  top:0px;
  left:0px;
  z-index:-1;
  -webkit-transform:rotate(-13deg) translate(10px,-220px); 
  -moz-transform:rotate(-13deg) translate(10px,-220px); 
  -o-transform:rotate(-13deg) translate(10px,-220px); 
  -ms-transform:rotate(-13deg) translate(10px,-220px); 
}

.diagonal-background{
  overflow:hidden;
}

ただし、背景画像を作成する方が簡単な場合もあります。試すべきリソースは次のとおりです。

• http://www.stripegenerator.com/
• http://bgpatterns.com/