背景を縦や横ではなく斜め方向に繰り返したいのですが、その方法をご存知ですか?たとえば、左上から始まり、右下に斜めに繰り返されるチェーンが必要です.1つは便利な方法で他の背景をオーバーレイする(蝉の方法)複数の画像を使用した背景の繰り返しソリューションを考えていましたが、しませんでした成功しました。これに対する解決策を知っているなら、私に知らせてください。
3 に答える
: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;
}
可能な最も簡単な方法(多くの時間を節約できます)は、斜めの背景を含む十分な大きさ(たとえば、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で斜めの背景を実現することはできません。
このようなものを機能させることができるかもしれません:
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;
}
ただし、背景画像を作成する方が簡単な場合もあります。試すべきリソースは次のとおりです。