Question

我有一个大型图片需要成为网站的一部分，当然这会影响性能。我有了把它切成碎片的想法，并且使用网格将图像放在一起是我的想法。

虽然有一个小问题......它必须在后台。

我应该采用可怕的z-index方法来解决这个问题还是有更美妙的解决方案？可以在任意数量的图块中剪切图像。

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>

如何处理后台线程中的分割图像？

1 个答案: