是否可以同时使用图像设置的*和*多个图像？

Question

我目前正在与我的团队合作，完成我们的最新网站，优化图像和所有这些好东西。

我遇到了一个小难题。 我们有很多背景图片。我希望在使用图像集的支持浏览器上对其进行优化，但我也喜欢使用this technique来改善感知的加载时间并获得更好的触摸效果。如果必须做，我当然会进行优化。

所以，我对大家的问题是： 我可以将图像设置用作多种背景之一吗？如果是这样，您能提供一个可行的例子吗？我试了一下，但是浏览器完全拒绝了代码，因此我在检查器中看到了删除线。

这里是我的代码示例（因为我正在从事液态工作，除非需要，否则不必将其转换为真正的CSS）：

background: image-set(
  url("URL") 1x,
  url("URL") 2x,
  url("URL") 3x,
  url("URL") 4x,
) center / 100% auto no-repeat,
linear-gradient(to right, #564029 0%, #6c5a43 50%, #6c573c 75%, #5d472f 100%) center / 100% auto no-repeat,
#72573c;

请随意指出我是否错过了代码中的某些内容。如果没有别的，我希望这可以作为其他人偶然发现的东西。

据我调查以供参考：

• 我看过multiple background examples
• 我看过image-set examples
• 我对Google进行了合理的尝试，试图找到两者结合的示例。我不会说我什么都没发现感到惊讶。

最后一点，我知道-webkit-前缀仍然是必需的。

Answer 1

您对image-set()的最后一个论点之后有一个逗号结尾。

以下是代码，“ 4x”后没有结尾逗号：

background: image-set(
  url("URL") 1x,
  url("URL") 2x,
  url("URL") 3x,
  url("URL") 4x
) center / 100% auto no-repeat,
linear-gradient(to right, #564029 0%, #6c5a43 50%, #6c573c 75%, #5d472f 100%) center / 100% auto no-repeat,
#72573c;