线性渐变和图像不工作的背景图像（使用Wordpress）

Question

这是代码：

style="background-image: linear-gradient(151deg,#6a7a8f 9%,#8692A4 30%,#a9b1be 49%, #ced2d9 66%, #f1f0f1 88%),url(<?php echo $page['image']; ?>);"

它在div上，由于某种原因，线性渐变是唯一出现的东西。当我将url（）放在线性渐变之前时，图像就是唯一出现的图像。

我检查了其他非常相似的stackoverflow问题，但我无法让它工作。

Answer 1

您使用的是纯色（HEX），因此它们会覆盖您的图像。您必须使用 RGBA 颜色。

像这样：

style="background-image: linear-gradient(151deg,rgba(106,122,143,0.5) 9%,rgba(134,146,164,0.5) 30%,rgba(169,177,190,0.5) 49%, rgba(206,210,217,0.5) 66%, rgba(241,240,241,0.5) 88%),url(<?php echo $page['image']; ?>);"