24

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

私は繰り返しyで頭の中ですべてのことを試しましたが、Googleで検索しても解決策が見つかりませんでした。

例：

バックグラウンドストレート背景画像

背景を上下反転y を繰り返すと背景画像が反転する

背景を再び上下反転そして、再びフリップしてストレートに

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

純粋な css による解決策がない場合にのみ、JScript (およびそのライブラリ) での解決策を受け入れます。

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

4

5 に答える 5

13

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

参照: http://www.w3.org/TR/css3-background

提案されているように、2 つのモチーフを 1 つの画像に組み合わせます。よりシンプルで常に機能します。

于 2013-07-30T14:21:06.020 に答える
4

背景画像を次のようにロードします

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

バックグラウンド

画像はすでに読み込まれているので、ブラウザーが余分な作業を行うことなく、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>

そしてちょっとプレスト

反転した

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

于 2013-11-06T10:08:44.370 に答える
2

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

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;
}

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

于 2014-10-09T14:08:37.813 に答える
2

私のコメントheresによると、純粋なCSSソリューションです。

    yourElementWithBackground{
    background-image : url("http:yourBackgroundURL");
    background-repeat: repeat-y;
    }

例（ここで機能しない場合はフルページとして実行するか、このFiddleを見てください） 

body {
    height: 1000px;
    width: 300px;
    background-image : url("http://picload.org/image/odgwcig/unbenannt.png");
    background-repeat: repeat-y;
}
単一の画像の使用に依存し、それを元に戻すと、JavaScript マジックを実行できます。JavaScript ごとに絶対配置と低い z-indexを持つ要素を挿入すると、それを元に戻すための css 変換が含まれるクラスが「逆」になる場合があります。ポジショニングも JS で行う必要があります。たとえば、img1 には top: 0、img2 top: heightOfImages* 1、img3 top: heightOfImages* 2 などを指定する必要があります。親要素の高さまたはユーザーの解像度に達するまでこれを行います。

本当にきれいではありませんが、実行可能です

于 2013-07-30T14:22:36.067 に答える
1

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

それはあなたのイメージ次第です。

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

動的な画像の場合でも、js を介してデータ URLとして新しい画像 (オリジナル + 反転) を生成し、それを要素で使用できます。

そうしないと、解決策は div を複製することになり、これは常に不便です...

于 2013-07-30T14:21:03.680 に答える