画像を複数回読み込むことなく画像を複数の部分にマスクする

Question

画像を取得し、複数の自己完結型の「部分」に分割したいと考えています。特定の数の部分の後でこれは多くの帯域幅になるので、イメージを複数回読み込むことなくこれを行うことができる必要があります。この質問のために、画像を4象限に分割したいと思っていますが、理想的にはスケーラビリティがあります。

ちょうど白「窓枠」オーバーレイ、左上がオフに左右上の象限の開始がないか注意してください。

ここで私が作ったフィドルは、すべての4象限の画像をロードする必要があることを除いて、私が望むものを達成します。 https://jsfiddle.net/gm4os1Ld/

#first{ 
    position:absolute; 
    clip: rect(0, 217px, 159px, 0); 
} 

#second{ 
    position:absolute; 
    left: 20px; 
    clip: rect(0px,435px,159px,217px); 
} 
#third{ 
    position:absolute; 
    top: 20px; 
    clip: rect(159px, 217px, 318px, 0); 
} 
#fourth{ 
    position:absolute; 
    left: 20px; 
    top: 20px; 
    clip: rect(159px,435px,318px,217px); 
} 

それはそれでひとつの画像のロードを行うことは可能ですか？ CSSまたはJqueryソリューションは問題ありません。

Answer 1

私は、コメント者の何人かが上記に述べたことをエコーし​​ます。これを行う必要はありません。ブラウザは、ドキュメント内で同じアセットを複数回使用するためには、スマートであることがあります。画像を一度呼び出すと、そのページでさらに使用する必要がある回数だけ頻繁に設定されます。

（ほとんどの時間をそのイメージのヘッダが「キャッシュなし」に設定されているが、それはそうでない限り）

Answer 2

以前のコメントから

何CSSで画像の設定についてのバックグラウンドポジション ？それはパズルゲームのためでしょうか？ http://codepen.io/gc-nomade/pen/JRAdOm（周りの各目に見える部分を移動するために、いくつかのフレックスやアニメーションを使用）スクリプトは、クラス名を切り替える必要があります（ただ背景画像よりも簡単）一度だけ

---

あなたはbackground-positionを使用し、optionnaly background-sizeあり各部分を動かすためのアニメーションがあります。 （http://codepen.io/gc-nomade/pen/kFGya/をcodepen古いからインスピレーションを得た）あなたは一度だけあなたのしているイメージをロードし、ウィンドウ」でそれをカバーしていないのはなぜ

#mybox { 
 
    width:456px; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 
.splitImg { 
 
    padding: 5px; 
 
    background: url(http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg) no-repeat; 
 
    height: 159px; 
 
    width: 218px;animation : reorder 5s infinite alternate ; 
 
    background-clip: content-box; 
 
    background-size:195%; 
 
} 
 
#first { 
 
    background-position:5px 5px; 
 
} 
 
#second { 
 
    background-position:-213px 5px; 
 
    animation-delay:1.25s 
 
} 
 
#third { 
 
    background-position:5px -154px; 
 
    animation-delay:2.5s 
 
} 
 
#fourth{ 
 
    background-position:-213px -154px; 
 
    animation-delay:3.75s 
 
} 
 
@keyframes reorder { 
 
    from { 
 
    order:1; 
 
    } 
 
    25% { 
 
    order:2 
 
    } 
 
    50% { 
 
    order:3 
 
    } 
 
    75% {order:4; 
 
    } 
 
    to { 
 
    order:1; 
 
    } 
 
}

<div id="mybox"> 
 
    <div id="first" class="splitImg"></div> 
 
    <div id="second" class="splitImg"></div> 
 
    <div id="third" class="splitImg"></div> 
 
    <div id="fourth" class="splitImg"></div> 
 
</div>

Answer 3

.grid { 
 
    width:400px; 
 
    height:400px; 
 
    display: inline-block; 
 
    background:url("https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg"); 
 
    background-size:0; 
 
    background-repeat:no-repeat; 
 
} 
 
.grid>div { 
 
    display:inline-block; 
 
    width:48%; 
 
    height:48%; 
 
    background:inherit; 
 
    background-size:200% 200%; 
 
    transition:all 1s linear; 
 
} 
 
#first{} 
 
#second{ background-position-x:100%;} 
 
#third { background-position-y:100%;} 
 
#fourth{ background-position-x:100%; background-position-y:100%;} 
 

 
.grid>div:hover { 
 
    transform:rotate(360deg); 
 
}

<div class="grid"> 
 
<div id="first"></div> 
 
<div id="second"></div> 
 
<div id="third"></div> 
 
<div id="fourth"></div> 
 
</div>