CSS3 複数の背景で作業する

以前に、 CSS3 Backgrounds and Bordersモジュールの機能に触れ、影の操作を検討しました（ box-shadow ）。 今日は、別の興味深い機能について少しお話します-バックグラウンドでのいくつかの画像の使用。

背景構成

一般に、バックグラウンドでいくつかの画像を作成する必要があるかもしれない多くの理由がありますが、その中で最も重要なものは次のとおりです。

• 個々の画像の合計重量が、レイヤーが平坦化された画像よりも少ない場合、画像のサイズのトラフィックを節約します。
• 視差の効果を実装する場合など、個々のレイヤーの独立した動作の必要性。

他の合理的な理由があるかもしれません:)

古典的なアプローチ

そのため、いくつかの背景画像を上下に配置する必要があります。 この問題は通常どのように解決されますか？ 非常に簡単：背景画像ごとにブロックが作成され、対応する背景画像が登録されます。 ブロックはネストされているか、適切な配置規則に従って行に配置されています。 以下に簡単な例を示します。

<div class="sample1"> <div class="sea"> <div class="mermaid"><div class="fishing"></div></div> <div class="fish"></div> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「人魚」内の「釣り」クラスを持つブロックは、デモンストレーションのみを目的としています。



今、いくつかのスタイル：

 .sample1 .sea, .sample1 .mermaid, .sample1 .fishing { height:300px; width:480px; position: relative; } .sample1 .sea { background: url(media/sea.png) repeat-x top left; } .sample1 .mermaid { background: url(media/mermaid.svg) repeat-x bottom left; } .sample1 .fish { background: url(media/fish.svg) no-repeat; height:70px; width:100px; left: 30px; top: 90px; position: absolute; } .sample1 .fishing { background: url(media/fishing.svg) no-repeat top right 10px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果：





この例では、3つのネストされた背景と、「背景」ブロックの隣にある魚のある1つのブロック。 理論的には、たとえばJavaScriptまたはCSS3トランジション/アニメーションを使用して、魚を移動できます。



ところで、「。fishing」のこの例では、CSS3でも定義されている、背景の配置に新しい構文を使用しています 。

 background: url(media/fishing.svg) no-repeat top right 10px;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現在、IE9 +およびOpera 11+でサポートされていますが、Firefox 10およびChrome 16ではサポートされていません。したがって、最後の2つのブラウザーのユーザーは魚を捕まえることができません。



さらに進みましょう。 この設計を簡素化する方法は？

複数の背景

CSS3に追加された新しいオプションは、1つの要素に対して複数の背景画像を一度に定義する機能です。 次のようになります。

 <div class="sample2"> <div class="sea"> <div class="fish"></div> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

および関連スタイル：

 .sample2 .sea { height:300px; width:480px; position: relative; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea.png"); background-position: top right 10px, bottom left, top left; background-repeat: no-repeat, repeat-x, repeat-x ; } .sample2 .fish { background: url("media/fish.svg") no-repeat; height:70px; width:100px; left: 30px; top: 90px; position: absolute; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

複数の画像を定義するには、背景画像ルールを使用して、コンマで区切られた個々の画像をリストする必要があります。 追加ルール、リストも、各画像の位置、繰り返し、その他のパラメーターを設定できます。 画像の順序に注意してください。レイヤーは左から右に上から下にリストされています。



結果はまったく同じです。

一つのルール

魚を後続の操作のために別のブロックに割り当てる必要がない場合、全体像を1つの単純なルールで書き換えることができます。

 <div class="sample3"> <div class="sea"></div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スタイル：

 .sample3 .sea { height:300px; width:480px; position: relative; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish.svg"), url("media/sea.png"); background-position: top right 10px, bottom left, 30px 90px, top left; background-repeat: no-repeat, repeat-x ; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私は結果の写真を提供しません-信じてください、それは上の2つの写真と一致します。 ただし、スタイル、特に「バックグラウンドリピート」に再び注意してください。仕様によると、リストの一部が最後にない場合、ブラウザは指定されたリストを必要な回数だけ繰り返して、リスト内の画像の数を一致させます。



この場合、これはそのような説明と同等です：

 background-repeat: no-repeat, repeat-x, <mark>no-repeat, repeat-x</mark>;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに短く

CSS 2.1を覚えていれば、背景画像を短い形式で記述する機能を定義します。 複数の画像はどうですか？ それも可能です：

 .sample4 .sea { height:300px; width:480px; position: relative; background: url("media/fishing.svg") top right 10px no-repeat, url("media/mermaid.svg") bottom left repeat-x, url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、そのような値をスキップすることはできません（デフォルト値と一致しない限り）。 ところで、背景画像の色を設定したい場合、これは最後のレイヤーで行わなければなりません。

ダイナミック画像

コンポジションがコンテナのサイズに応じて静的または動的である場合、複数の背景が明らかにページのデザインを単純化します。 しかし、JavaScriptから独立して構成の個々の要素（移動、スクロールなど）を操作する必要がある場合はどうでしょうか。

ところで、ここに人生の例があります-Yandexのタンポポのテーマ：



コードに入ると、次のようなものが表示されます。

 <div class=b-skin-bg sizcache="272" sizset="0"> <div class=b-fluff-bg sizcache="272" sizset="0"> <div class=b-fluff__sky sizcache="272" sizset="0"> <div style="background-position: 3244px 0px" class=b-fluff__cloud></div> <div style="width: 1200px" class=b-max-width sizcache="214" sizset="0"> <div class=b-fluff__placeholder sizcache="302" sizset="0"> <div style="bottom: 105px; display: none; left: 940px" class="b-fluff__item b-fluff_item_3" jQuery1328289994769="30"></div> <div style="bottom: 50px; display: none; left: 879px" class="b-fluff__item b-fluff_item_3" jQuery1328289994769="31"></div> <div style="bottom: 105px; display: none; left: 940px" class="b-fluff__item b-fluff_item_3" jQuery1328289994769="32"></div> ... </div> </div> </div> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

b-fluff-bg、b-fluff__cloud、およびb-fluff__itemクラスのブロックには、互いにオーバーラップする背景画像が含まれています。 さらに、雲のある背景が絶えずスクロールし、タンポポが画面を飛び回っています。



これは複数の背景を使用して書き換えることができますか？ 原則として、はい、ただし1）ターゲットブラウザーでのこの機能のサポート、および... 2）続きを読むことを条件とします。

複数の背景にスピーカーを追加する方法は？ このような状況では、内部表現でブラウザが関連ルールに従って背景画像の個々のパラメータを分散させると便利です。 たとえば、ポジショニングには「バックグラウンドポジション」があり、シフトの場合はそれだけを変更するだけで十分です。 ただし、複数の画像を使用する場合も料金がかかります。このルール（および同様のルール）では、ブロックに設定されたすべての背景の位置をリストする必要があり、これを選択的に行うことはできません。



魚を背景にアニメーションを追加するには、次のコードを使用できます。

 $(document).ready(function() { var sea = $(".sample5 .sea")[0]; var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; function animationLoop() { fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX < 0) fishesX = 480; mermaidX += 0.5; if(mermaidX > 480) mermaidX = 0; fishY = -10 + (10 * Math.cos(t * 0.091)); fishX = 10 + (5 * Math.sin(t * 0.07)); sea.style.backgroundPosition = "top " + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, top left"; window.requestAnimFrame(animationLoop); } animationLoop(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

どこで

 window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) { window.setTimeout(callback, 1000 / 60); }); })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果（ ビデオ ）：







ところで、アニメーションはCSS3 Transitions / Animationsでも実行できますが、これは別の議論のトピックです。

視差とインタラクティブ

最後に、同様の操作で、視差の効果または背景とのインタラクティブな相互作用を簡単に追加できます。





このようなシナリオでは、複数の背景画像が便利です。なぜなら、コンテンツについてではなく背景のみについて話している間、HTMLコードとDOMが散らかるのを避けることができるからです。 ただし、すべての料金を支払う必要があります。名前、ID、クラス、またはその他のパラメーターで構成の個々の要素にアクセスすることはできません。 コード内のコンポジション内の要素の順序を明示的に覚えておく必要があり、実際、任意の要素のパラメーターを変更するたびに、すべての要素のこのパラメーターの値を記述する行を接着し、コンポジション全体で更新する必要があります。

 sea.style.backgroundPosition = "top " + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, top left";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、ページのhtmlコードを可能な限りクリーンな状態に保ちながら、個々のレイヤーとの関係の仮想化を行う便利なjavascriptコードでラップできると確信しています。

互換性には何がありますか？

IE9 +を含む人気のあるブラウザーの最新バージョンはすべて、複数の画像をサポートしています（たとえば、 caniuseで確認できます）。





Modernizrを使用して、複数の背景をサポートしていないブラウザーに代替ソリューションを提供することもできます。 Chris Coyierが複数の背景を使用する場合のレイヤーの順序に関するメモに書いたように、次のようなことを行います。

 .multiplebgs body { /* Awesome multiple BG declarations that transcend reality and imsourcess chicks */ } .no-multiplebgs body { /* laaaaaame fallback */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JSを使用して下位互換性を提供することについて混乱している場合、単にバックグラウンドを2回宣言できますが、これにはリソースのダブルロードの可能性という欠点もあります（これは特定のブラウザーでのcss処理の実装に依存します）：

 /* multiple bg fallback */ background: #000 url(...) ...; /* Awesome multiple BG declarations that transcend reality and imsourcess chicks */ background url(...), url(...), url(...), #000 url(...);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

既にWindows 8について考え始めている場合、metroスタイルのアプリケーションを開発するとき、IE10と同じエンジンが内部で使用されるため、複数の背景を使用できることに注意してください。



psトピック：私は、セミの原理に関する驚異的な記事を思い出さずにはいられません。