web-dev-qa-db-ja.com

繰り返すたびに背景画像を垂直方向に反転します

背景画像を垂直に繰り返すトリックを探していますが、画像が繰り返されるたびに垂直に反転させたいです。

私は頭の中ですべてのことをrepeat-yで試しましたが、解決策を見つけられませんでした。

例：

Background ストレート背景画像

Background flipped vertically リピート時に背景画像が反転する

Background flipped vertically again そして再びまっすぐに

その位置を取得する方法はありますか？

純粋なcssのソリューションがない場合にのみ、JScript（およびそのライブラリ）でソリューションを受け入れます。

皆さん、ありがとうございました！

javascriptcsscss-positionbackground-position
15
rkpasia

背景画像を回転させるCSS3プロパティがないため、標準のCSS3を使用してこれを行うことはできません。

リファレンス： http://www.w3.org/TR/css3-background

提案したように、2つのモチーフを1つの画像に組み合わせると、はるかにシンプルになり、常に機能します。

6
Marc Audet

他の回答は、背景画像を複製してマージすることを提案しました。これにより、特に大きな画像の場合、ダウンロードするメガバイトが追加される可能性があります。ただし、大きな画像の場合は、コンテンツがカバーする必要がある回数だけ画像を並べるだけで十分な場合があります。注：このメソッドはCSS 2D変換を使用します。現在は93％ supported です。サポートされていないブラウザでは、変換は無視されるため、デザインによっては問題にならない場合もあります。

http://jsfiddle.net/skibulk/6hxeg9cu/

.wrap1 {
    transform: scaleY(-1);
    background: url(http://i.stack.imgur.com/I4hlZ.png) left bottom;
}

.wrap2 {
    transform: scaleY(-1);
    background:
        url(http://i.stack.imgur.com/I4hlZ.png) repeat-x left top,
        url(http://i.stack.imgur.com/I4hlZ.png) repeat-x left 500px;
}

基本的に、私は複数の背景を水平方向に繰り返し、垂直方向にオフセットして使用しています。次に、コンテナを反映しました。制限は、背景が永久に繰り返されないことです。したがって、コンテンツがページのずっと下にプッシュされることを期待しない場合、これはオプションです。

3
skibulk

私はそのように背景画像をロードします

<style>
body{
    background-image:url('mybackground');
    background-repeat:no-repeat;
}
</style>

Background

画像が既に読み込まれているので、ブラウザーが余計な作業を行わなくても、少しJavaScriptを実行できます。画像の高さがウィンドウ全体に表示されるかどうかを確認できます。

<script>
var el      =  $('body')[0];
var src     =  $(el).css('background-image').slice(4, -1);
var img     =  new Image();

checkHeight =  function(){    
    if(img.height < window.innerHeight){
       repeatBg();     
    }
}
img.onload  =  checkHeight();
img.src = src;
</script>

画像の背景がウィンドウの高さいっぱいに収まらない場合、この背景はすぐに繰り返す/反転する必要があります（これにより、読み込み時間が長くなります）。それ以外の場合は、イベントリスナーを使用して、後でチェックをトリガーできます。
次の関数は、canvas要素に画像を描画し、dataURLを作成します。 background-image srcは新しいdataURLに更新され、repeat-backgroundはno-repeatからrepeat-y（vertically）に変更されます。
その後、イベントリスナーが削除され、関数が再度呼び出されなくなります。

<canvas style="display:none" id="canvas"></canvas>


<script>

repeatBg = function(){  
    var canvas = $('#canvas')[0];
    var ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height *2 ;
    ctx.drawImage(img,0,0);
    ctx.scale(1, -1);
    ctx.translate(0, -img.height);
    ctx.drawImage(img, 0, -img.height, img.width, img.height);
    var dataURL = canvas.toDataURL();
    $(el).css({
        'background-image' : 'url('+dataURL+')',
        'background-repeat' : 'repeat-y'
    });    
    $(window).off('load, scroll, resize', checkHeight);        
}
$(window).on('load, scroll, resize', checkHeight);



</script>

そして、ちょっとプレスト

flipped

http://jsfiddle.net/dtjones1988/y49rvu73/6/

2
TarranJones

純粋なcssソリューションは不可能です。

それはあなたのイメージに依存します。

それがページの装飾に使用する静的なものである場合は、2倍の高さにして、反転したコピーを下部に追加し、標準のCSSを介して直接使用することで変更するのが最善です。

それが動的なものである場合でも、jsを介して data url として新しい画像（元の+反転）を生成し、要素で使用できます。

それ以外の場合、解決策はdivを複製することですが、これは常に不便です...

1
Mabedan