带有图案覆盖CSS的背景

Question

我正在尝试通过图案覆盖和左侧不透明的图案来实现背景。

这是我的代码。

background: #d20254 url(pattern-gray.png);
background-blend-mode: multiply;
background-position: right;

结果是这样。...

但这不是我想要的。我希望您如何在此图像中看到。

有人可以用这个来帮助我吗？

谢谢。

Answer 1

您可以在图像网址之前的background属性中插入css颜色图案定义，以为图像创建叠加层渐变颜色：

background: linear-gradient(90deg, rgba(210,2,84,1) 0%, rgba(255,255,255,1) 53%), url(pattern-gray.png);

有很多在线工具可以生成CSS背景渐变。我以this tool为例