バックグラウンドスレッドで分割されたイメージを処理する方法は？

Question

私はサイトの一部である必要がある大きな画像を持っていますが、もちろんこれはパフォーマンスに当てはまります。私はそれを分割し、グリッドを使用して負荷で画像を一緒に彩るアイデアを得ました。

1つの小さな問題ですが...それはバックグラウンドにある必要があります。

これを修正するために恐ろしいz-インデックス方法を使うべきですか、それともより美しい解決策がありますか？画像は任意の数のタイルでカットすることができます。

Answer 1

required browser supportに応じて、複数の背景画像を使用できます。それらを適切な位置にバックグラウンドで配置します。

html, 
 
body, 
 
div { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div { 
 
    background-image: 
 
    url(http://via.placeholder.com/350x150?text=Image1), 
 
    url(http://via.placeholder.com/350x150?text=Image2), 
 
    url(http://via.placeholder.com/350x150?text=Image3), 
 
    url(http://via.placeholder.com/350x150?text=Image4); 
 
    background-repeat: 
 
    no-repeat, 
 
    no-repeat, 
 
    no-repeat, 
 
    no-repeat; 
 
    background-position: 
 
    top left, 
 
    top right, 
 
    bottom left, 
 
    bottom right; 
 
    background-size: 
 
    51% 50%, 
 
    50% 50%, 
 
    51% 50%, 
 
    50% 50%; 
 
}

<div></div>