在css中使用混合或其他方式来显示主体背景图像和页脚颜色

我有一个网站，我曾经使用像photoshop这样的图像混合

在这个网站上，我使用不同的颜色作为页脚，将其分为四部分：第一和第二种颜色的不透明度为0.7，第三种颜色为0.9，最后一种颜色为0.5。由于前三种颜色的不透明度接近1，所以身体背景网格与第四种颜色不一样。但是我不想改变它们的不透明度

我需要表现得像

---

但在这个屏幕截图中，我将不透明度降低到了0.5，因此页脚颜色看起来与我想要的不完全一样，但我需要使用相同的颜色，第一和第二颜色的不透明度为0.7，第三颜色的不透明度为0.9。

因此，您要做的是在蓝色、粉色、黄色下显示更多的网格，但您不想更改不透明度。您可以使用颜色对网格进行photoshop处理，以便控制显示的网格框数量，然后将其设置为背景并重复-x