是否可以使用多個圖像切片來實現`background-size：cover`效果？

如果我用一個大圖像文件使用background-size: cover;，我會得到我想要的效果。但是，如果我使用技術創建背景（即將圖像分成多個圖像並以不同方式壓縮圖像以實現更好的文件大小減小），那麼可以以某種方式實現相同的效果嗎？是否可以使用多個圖像切片來實現`background-size：cover`效果？

來源

2012-03-28 anssi

我不確定我是否正確理解了這個問題。這聽起來像是你想要覆蓋整個元素背景的一個圖像（不管元素有多大），但是你想將該圖像分成幾個圖像，這樣你就可以有幾個更小的圖像圖像，而不是一個更大的一個。小圖像不會像一個大圖像一樣大小嗎？ – 2012-03-28 08:04:37

我可以根據特定切片以不同的方式壓縮切片（.jpg，.png左右），因此，如果使用單個大圖像文件，我可以獲得切片的總和。 – anssi 2012-03-28 08:12:09

啊哈，我明白了，謝謝。 – 2012-03-28 08:22:46

background-size可以採取百分比值，並且不同的背景圖像（用逗號分隔）有不同的background-size和背景位置值，所以您可能可以使其工作。

然而，由於道路background-position的作品，它可能是一個有點棘手 - background-position: 50% 0;手段「位置的圖像，以便沿着圖像的長度的方式來點50％是沿單元的長度的50％處」。對於複雜的切片，可能需要很多手段才能使圖像排列起來，並且可能會出現1像素舍入問題。

編輯：，正如您在評論中指出，background-size:cover保持圖像的寬/高比，同時確保後臺被覆蓋，其百分比值不能，除非你知道的尺寸元素提前。

來源

2012-03-28 10:38:41

感謝您的回答，但我認爲使用百分比值並不能解決縮放切片的問題。 [W3]（http://www.w3.org/TR/css3-background/）在背景大小的「封面」部分中說過：**縮放圖像，同時保留其固有長寬比（如果有的話）最小的尺寸，使其寬度和高度都可以完全覆蓋背景定位區域。** – anssi 2012-03-28 11:19:59

@anssi：啊，這是非常好的一點 - 你肯定無法用多個背景圖像達到這種效果。 – 2012-03-28 11:43:41

是否可以使用多個圖像切片來實現`background-size：cover`效果？

回答

相關問題