如何混合两个背景图像，重复和不重复的一个？

【问题标题】：How to blend two background images, repeated and non-repeated one?如何混合两个背景图像，重复和不重复的一个？
【发布时间】：2016-12-28 10:03:34
【问题描述】：

我需要用多重混合模式混合两张背景图片，但第一张图片不应该重复，第二张图片应该重复，因为它是一个图案。

我如何使用 SASS (CSS) 来做到这一点？

【问题讨论】：

标签： css image background sass background-image

【解决方案1】：

background: url('img1.jpg'),url('img2.jpg');
background-repeat: no-repeat, repeat;
background-blend-mode: multiply;

这是大多数与背景图像相关的属性的工作方式，包括background-size 和background-position；当指定多个图像时（逗号分隔的 url 列表，如图所示），您可以列出每个图像的属性。订单将匹配，这意味着在我们的示例中，img1.jpg 不会重复，img2.jpg 会。

【讨论】：