二重の背景。複数のCSS背景画像を作成する方法。コード例：背景の複数の画像

このセクションの冒頭でbackground-imageプロパティについて説明したとき、1つのことについては触れませんでした。CSS3では、コンマで区切ってリストするだけで、1つの要素に複数の背景を追加できます。これは、背景のある要素の幅または高さが可変で、背景をそのサイズに調整する必要がある場合に特に便利です。

CSSで複数の背景を設定する方法

実際に役立つ例を紹介します。フレームにテキストのブロックを配置する必要があると想像してみましょう。フレームはPNG形式のグラフィックファイルです。

このタスクでは、テキストの高さがわかりません。テキストがフレームに完全に収まるのか、境界を超えるのかはわかりません。この未知の値のため、元のフレーム描画を背景として使用するリスクを冒すことはできません。しかし、CSSを使用すると、必要に応じてこの境界線を強制的に長くすることができます。これを行うには、グラフィックエディタの元の図面を上、下、中央の3つの部分に分割し、各ファイルを個別に保存する必要があります。このような：

フレームの上部

フレームの下部

フレームの真ん中

フレームの中央の画像を軸に沿って繰り返して背景を作成します。 Yフレームの上部と下部は複製されません。 3つの背景すべてを要素に追加し、他の必要なスタイルも書き留めておきましょう。

フレーム（background-image：url（https://goo.gl/tKyzHt）、/ *フレームの上部* / url（https://goo.gl/SUKymM）、/ *フレームの下部* / url（https： //goo.gl/Km7HVV）; / *境界線の中央* / background-position：中央上部、/ *境界線の上部の位置* /中央下部、/ *境界線の下部の位置* /中央上部; / *位置境界線の中央の* / background -repeat：no-repeat、/ *フレームの上部は繰り返されません* / no-repeat、/ *フレームの下部は繰り返されません* / repeat-y; / *中央フレームのが垂直方向に繰り返されます* / background-size：contain; / *ここではすべての背景が同じ値になります* / height：auto; / *ブロックの高さはコンテンツの量によって異なります* / width：400px; / *ブロックの幅修正されました* /パディング：30px; / *ブロックパディング* /）

各背景はコンマで区切る必要があり、最後の後にのみセミコロンがあり、宣言の終わりを示します。コードの利便性と読みやすさのために、新しい行で各URLを指定することをお勧めします。

背景画像はレイヤーに配置されています-上下に配置されています。最初に指定された背景は最上層にあり、2番目の背景は最初の背景の下にあり、3番目は最初の2つの下にあります。そのため、フレームの中央を最後に配置して、上部と下部が重ならないようにしました。

次にコードで、各背景のbackground-positionプロパティとbackground-repeatプロパティを設定します（背景画像と同じ順序に従います）。はい、あなたはそれを正しく推測しました：これが必要な場合は、他の背景プロパティの値をコンマで区切って指定できます。また、すべての背景に1つの値を適用する必要がある場合は、通常どおりにそれを書き留めます（この場合、これはbackground-size：containプロパティです）。

さて、結果を見てみましょう：

ご覧のとおり、フレームは正しく配置されており、ブロックの内容を美しくフレームに収めています。ブロック内のテキストの量を増やすとどうなりますか？私たちが見ます：

フレームの中央部分は、長さを伸ばしてテキストに合わせて調整するかのように、必要な回数だけ垂直方向に複製されました。これは、単一のフレーム画像を使用した場合には不可能だった効果です。わかりやすくするために、さらにテキストを追加しましょう。

もちろん、いくつかの背景を他の目的にも使用できます。多くの例のうち、1つだけを示しました。あなたの状況を想像し、バックグラウンドグループを使用して練習してみてください。

省略表記の使用

backgroundプロパティは、複数の値も受け入れます。複数の背景を使用する場合、混乱しにくいため、省略表記の方がはるかに便利です。フレームワークのコードを書き直してみましょう。

背景：url（https://goo.gl/tKyzHt）センタートップ/リピートなしを含む/ *フレームの上部* / url（https://goo.gl/SUKymM）センターボトム/リピートなしを含む/ *フレームの下部* / url（https://goo.gl/Km7HVV）中央上部/繰り返しを含む-y; / *フレームの中央* /

このオプションは、煩わしさが少なく、理解しやすいように見えます。

タスク

CSS3を使用して、ブロックに2つの背景画像を追加します。

解決

最新のブラウザでは、要素に任意の数の背景画像を追加して、各背景のオプションをコンマで区切って一覧表示できます。ユニバーサルプロパティbackgroundを使用して、最初に1つの背景を指定し、2番目をコンマで区切って指定するだけで十分です。

例として、ブロックの左右に垂直の装飾線を作成することを検討してください。これを行うには、最初に、継ぎ目なしで垂直方向に繰り返す必要がある画像を準備します。図では。図1は、左端に沿って表示される背景画像を示しています。右に表示する2枚の写真。

米。 1.左側の境界線の背景画像

米。 2.右側の境界線の背景画像

背景が追加されるブロック要素として、タグは通常使用されます

その利便性と汎用性により、他の要素と区別するために、ブロッククラスが追加されます（例1）。

例1.2つの背景画像

HTML5 CSS3 IE Cr Op Sa Fx

2つの背景画像

時計の11か月の間に、無線通信士は合計300625グループの8642の通信セッションを実施しました。これは、気象電報と空中電報だけです。ラジオ局チェリュスキン岬7450グループから受信。

この例の結果を図1に示します。 3.3。

）。今日は、もう1つの興味深い機能、つまり背景での複数の画像の使用について少し説明します。

背景の構成

一般に、背景に複数の画像を作成する必要がある理由はたくさんありますが、その中で最も重要なものは次のとおりです。

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

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

古典的なアプローチ

したがって、いくつかの背景画像を上下に配置する必要があります。このタスクは通常どのように解決されますか？非常に簡単です。背景画像ごとにブロックが作成され、対応する背景画像がそれに割り当てられます。ブロックは相互にネストされるか、適切な配置ルールで一列に配置されます。簡単な例を次に示します。

デモンストレーション目的でのみ、「人魚」内のクラス「釣り」でブロックします。

今いくつかのスタイル：
.sample1 .sea、.sample1 .jelly、.sample1 .fishing（高さ：300px;幅：480px;位置：相対;）。sample1 .sea（背景：url（media / sea.png）repeat-x左上;） .sample1 .jelly（background：url（media / jelly.svg）repeat-x左下;）。sample1 .fish（background：url（media / fish.svg）no-repeat;高さ：70px;幅：100px;左：30px;上：90px;位置：絶対;）。sample1 .fishing（背景：url（メディア/fishing.svg）繰り返しなし右上10px;）

結果：

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

ちなみに、この例では、CSS3でも定義されている「.fishing」の新しいバックグラウンドポジショニング構文を使用しています。
背景：url（media / fishing.svg）no-repeat右上10px;
現在、IE9 +およびOpera11 +でサポートされていますが、Firefox10およびChrome16ではサポートされていません。したがって、最後の2回の閲覧のユーザーは、まだ魚を捕まえることができません。

複数の背景

CSS3に追加された新機能が救いの手を差し伸べます。1つの要素に対して複数の背景画像を一度に定義する機能です。これは次のようになります。

そして対応するスタイル：
.sample2 .sea（高さ：300px;幅：480px;位置：相対;背景画像：url（ "media / fishing.svg"）、url（ "media / jelly.svg"）、url（ "media / sea。 png "）; background-position：右上10px、左下、左上; background-repeat：no-repeat、repeat-x、repeat-x;）。sample2 .fish（background：url（" media / fish.svg "）繰り返しなし;高さ：70px;幅：100px;左：30px;上：90px;位置：絶対;）
複数の画像を定義するには、背景画像ルールを使用して、個々の画像をカンマで区切って一覧表示する必要があります。追加のルール（リスト）を使用して、各画像の配置、繰り返し、およびその他のパラメーターを設定できます。画像がリストされる順序に注意してください。レイヤーは、左から右に上から下にリストされます。

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

1つのルール

後続の操作のために別のブロックで魚を選択する必要がない場合は、1つの簡単なルールで全体像を書き直すことができます。

スタイル：
.sample3 .sea（height：300px; width：480px; position：relative; background-image：url（ "media / fishing.svg"）、url（ "media / jelly.svg"）、url（ "media / fish。 svg "）、url（" media / sea.png "）; background-position：右上10px、左下、30px 90px、左上; background-repeat：no-repeat、repeat-x;）

私は結果を写真に載せません-私を信じてください、それは上の2つの写真と一致します。ただし、スタイル、特に「background-repeat」に再度注意してください。仕様によれば、最後のリストの一部が欠落している場合、ブラウザは指定されたリストを必要な回数繰り返して、数に一致させる必要があります。リスト内の画像の。

この場合、これは次の説明と同等です。
background-repeat：no-repeat、repeat-x、繰り返しなし、繰り返し-x;

さらに短い

CSS 2.1を覚えているなら、それは簡潔な方法で背景画像を記述する能力を定義します。複数の画像はどうですか？それも可能です：

Sample4 .sea（高さ：300px;幅：480px;位置：相対;背景：url（ "media / fishing.svg"）右上10px繰り返しなし、url（ "media / jelly.svg"）左下繰り返し-x 、url（ "media / fish.svg"）30px 90px no-repeat、url（ "media / sea.png"）repeat-x;）

ただし、値をスキップすることはできません（デフォルトと一致しない限り）。ちなみに、背景画像の色を設定したい場合は、最後のレイヤーで行う必要があります。

ダイナミック画像

コンポジションが静的または動的で、コンテナのサイズに依存するだけの場合、複数の背景によってページデザインが明らかに簡素化されます。しかし、JavaScriptとは独立してコンポジションの個々の要素（移動、スクロールなど）を操作する必要がある場合はどうなりますか？

ちなみに、これが実際の例です-Yandexのタンポポのテーマ：

コードを掘り下げると、次のようなものが表示されます。

...

クラス「b-fluff-bg」、「b-fluff__cloud」、「b-fluff__item」のブロックには、互いに重なり合う背景画像が含まれています。さらに、雲のある背景は常にスクロールしており、タンポポが画面を横切って飛んでいます。
これは複数の背景を使用して書き直すことができますか？原則として、はい。ただし、1）ターゲットブラウザでのこの機能のサポートと... 2）続きを読む;）

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

魚の背景にアニメーションを追加するには、次のコードを使用できます。
$（ドキュメント）.ready（function（）（var sea = $（ ".sample5 .sea"）; var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var jellyzenX = 0; var t = 0;関数animationLoop（）（fishesY = 90 + Math.floor（30 * Math.sin（t ++ / 180.0））; if（-fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480）担当者X = 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、" + jellyx + "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）（60）;））;））（）;

ちなみに、アニメーションはCSS3トランジション/アニメーションを介して実行することもできますが、これは別の議論のトピックです。

視差とインタラクティブ

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

このようなシナリオでは、複数の背景画像が役立ちます。これは、背景（コンテンツではなく）についてのみ説明しているのですが、それらを使用すると、HTMLコードとDOMが乱雑になるのを防ぐことができます。しかし、すべてに代償が伴います。名前、ID、クラス、またはその他のパラメーターで個々の構成要素にアクセスすることはできません。コード内のコンポジション内の要素の順序を明確に覚えておく必要があります。実際、要素のパラメーターを変更するたびに、すべての要素のこのパラメーターの値を説明する行を接着して、次のように更新する必要があります。全体の構成。

Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px、" + jellyx + "px bottom、" + fishesX + "px" + fishesY + "px、top left";

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

互換性とは何ですか？

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

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

Multiplebgs body（/ *現実を超越し、ひよこをインソースする素晴らしい複数のBG宣言* /）.no-multiplebgs body（/ * laaaaaameフォールバック* /）
JSを使用して下位互換性を提供することに混乱している場合は、バックグラウンドを2回宣言するだけですが、リソースの二重読み込みの可能性という欠点もあります（これは、特定のブラウザーでのcss処理の実装によって異なります）。

/ *複数のbgフォールバック* /背景：＃000 url（...）...; / *現実を超越し、ひよこをインソースする素晴らしい複数のBG宣言* / background url（...）、url（...）、url（...）、＃000 url（...）;

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

追伸トピックについて：私は仕方がないがについての驚異的な記事を覚えています

単一のbackgroundプロパティを使用して、複数の背景画像を1つの要素に一度に追加できます。これにより、1つの要素で複雑な背景や1つの画像を作成し、さまざまな設定で複数回表示することができます。すべての画像とそのパラメータはコンマで区切られてリストされ、同時に画像が最初に表示され、残りの画像の上に表示され、最後の画像がそれぞれ一番下の画像になります。例1は、3つの画像で背景を作成する方法を示しています。

例1.3つの背景

バックグラウンド

上記の例のようにbackground-sizeなど、背景にスタイルプロパティを個別に設定する必要がある場合は、各背景のパラメータがカンマで区切られて表示されます。この例の結果を図1に示します。 1.1。

米。 1.3つの画像の背景

例2に示すように、背景用の個別の画像を使用すると、位置を変更したり、アニメーション化したりできます。

例2.アニメーションの背景

バックグラウンド

ここで、1つの画像を使用してフレーム付きのブロックを作成する方法を考えてみましょう（図2）。ブロックの幅は固定されており、ブロックのコンテンツの量に応じて高さが伸びます。

米。 2.手描きのフレーム

この図は、グラフィックエディタで切り取って水平に配置する必要がある上部と下部を明確に示しています。中央部分は、継ぎ目なしで垂直に繰り返されるように選択されています。写真は繰り返しパターンがはっきりしているので、選択に問題はありません。その結果、このような準備された画像が得られます（図3）。市松模様のボックスは透明度を示し、画像と一緒に色の背景を設定し、スタイルを簡単に変更できます。

米。 3.背景画像の準備

背景自体はbackgroundプロパティによって表示され、目的のフラグメントの座標も設定します。各背景のパラメーターはコンマで区切られてリストされており、この場合、それらの順序が重要です。ブロックの上部と下部が重ならないようにするため、最初に配置します（例3）。背景色は最後に指定します。

例3.複数の背景画像

バックグラウンド

ウィツィロポチトリ-「ハチドリの魔術師」、戦争と太陽の神。

テスカトリポカ-アステカの主神である「喫煙鏡」。

人身御供は両方の神に行われました。

最初の背景はボックスの上部の境界線を描画し、2番目の背景は下部を描画し、3番目の背景は垂直方向の境界線を描画します。最後は、ブロックの透明な中央部分に表示される色です（図4）。

）。今日は、もう1つの興味深い機能、つまり背景での複数の画像の使用について少し説明します。