4

現在、垂直方向に繰り返され、ページの中央に配置されている背景画像があります。画像を説明する ASCII アートを次に示します。左側と右側にマークが付けられています。

----------
|        |
|        |
|L      R|
|        |
|        |
----------

毎回垂直方向の端に沿って画像を反転させることで、ブラウザ ウィンドウ全体で画像を繰り返し表示したいと思います。

----------------------------------------
|        ||        ||        ||        |
|        ||        ||        ||        |
|L      R||R      L||L      R||R      L|
|        ||        ||        ||        |
|        ||        ||        ||        |
----------------------------------------

これで、次のような画像を作成して、CSS を使用して繰り返すことができます。

--------------------
|        ||        |
|        ||        |
|L      R||R      L|
|        ||        |
|        ||        |
--------------------

ただし、この画像はすでに私が望むよりもはるかに大きいため、2 倍に拡大することは問題外です (特に、Retina バージョンも計画しているからです!)。Javascriptでこれを行うことは、良い妥協点になると思いました.

すでにこれを処理できるJSライブラリを知っている人はいますか?

ありがとう、

ティム

4

2 に答える 2

0

CSS3 を使用して画像を反転できますが、最新のブラウザーでのみ機能します。

この質問と承認された回答をご覧ください:ここをクリック

于 2012-11-08T10:28:48.377 に答える
0

これは、プロパティ (および古い IE の場合はフォールバック)を介して、ほとんどのブラウザーで CSS を使用して実行できます。記事はこちら。例えば：transformfilter

img.flipped {
    -moz-transform:    scaleX(-1);
    -o-transform:      scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform:         scaleX(-1);
    filter:            FlipH;
    -ms-filter:        "FlipH";
}

実例 (グラバターを使用) | ソース

フォールバック フィルターのおかげで、IE6 でも動作します。わお。もちろん、IE9 (transformサポートされています)、Chrome、Firefox、Opera...

バックグラウンドでそれを行うのは、おそらく絶対位置と負の z-index が必要になるので、少し面倒かもしれませんが...

于 2012-11-08T10:25:52.893 に答える