4

tumblr サイトの iPad PNG / 背景画像のピクセル サイズ制限を回避する作業を完了しようとしています。サイトのコンテンツ領域は無制限のスクロール機能を使用しており、下にスクロールするとより多くの文字が表示される巨大な垂直背景があります.

背景画像を複数のpngに分割し、位置を設定すると、すべてが見栄えがよくなりました..しかし、最後に理解できないのは、クラスター全体を繰り返す方法です. background-repeat を設定した場合: repeat-Y; 画像はすべて互いに重なり合っています。

ありがとう、コードブロー:

ドラット

#contnetAreaBack {
        margin-left:auto;
        margin-right:auto;
        background-image:url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_01.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_02.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_03.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_04.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_05.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_06.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_07.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_08.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_09.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_10.png');
        background-position:center 0px, center 1000px, center 2000px, center 3000px, center 4000px, center 5000px, center 6000px, center 7000px, center 8000px, center 9000px;
        background-size: auto auto;
        background-repeat: no-repeat;
        background-attachment:scroll;
        width:100%;
        padding-bottom:500px;
        overflow-x:hidden;
    }
4

2 に答える 2

0

あなたの画像から、あなたは同じ黄色のパイプをさまざまな文字や亀裂で使用していることに気付きました. おそらく、背景を黄色のパイプのピクセルの最初の行にし、それを y で繰り返すことができます。次に、文字がなくなったときに終了する while ループに基づいて、パイプ上にフローティング画像として文字/クラックだけを含む小さな png ファイルを挿入する php スクリプトを実行できます。私はあなたが言及した制限に精通していませんが、使用できる画像の数に制限がない場合は、ページが長くなるにつれて無限にスクロールして文字をループバックしたい場合を除き、その方法が機能するはずです. その場合、同じ解決策を試しますが、php ループの制約として文字数を使用する代わりに、オーバーレイ画像を挿入する前にページの高さを取得しようとします。それを1つのオーバーレイ画像の高さで割り（すべてのbg画像の高さが同じだと思います）、切り上げます。これはスピットボール ソリューションです。大きな問題が発生した場合は、より具体的に説明できます。

于 2012-10-03T14:16:42.557 に答える
0

mod が特定の値に等しくなったら、javascript で %(mod) を使用して画像を繰り返すことができます。

基本的に、分割されたすべての画像を単一の div に配置し、その下に複製の div を配置してから、mod を繰り返す必要があります。

于 2012-10-04T05:24:44.680 に答える