html - 具有线性渐变和图像的背景图像不起作用(使用 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']; ?>);"